Skip to content
Home A Comprehensive Technical Guide – The Web Accessibility Playbook

A Comprehensive Technical Guide – The Web Accessibility Playbook

I have been curious about embracing a wide array of projects. I was once approached and presented with a fascinating opportunity. The opportunity was a project that complemented my enthusiasm for discovering new things well. “Web Accessibility Technical Playbook” was the title. I felt a rush of excitement. It was an opportunity that combined my desire for creative expression, and a commitment to making the digital world a more accessible place for everyone. Unhesitatingly, I accepted it and was interested in finding out more about the Web Accessibility Technical Playbook and how I could help. I learned about the project’s mission which was – to create a comprehensive guide for web developers and designers on making websites and applications more accessible to people with disabilities. The Playbook aimed to bridge the gap between technology and inclusivity, and I was immediately drawn to the challenge.

Hence, I decided to craft an article about the “Web Accessibility Technical Playbook”. To kick things off, let’s commence by delving into the concept of web accessibility.

Introducing the Web Accessibility Technical Playbook

The Web Accessibility Technical Playbook provides a framework for the integration of strategic, business and technology management to ensure that a given website is accessible for people with disabilities.

The Web Accessibility Technical Playbook is an in-depth resource for web developers, designers, and anybody else involved in the creation of digital material. It acts as a road map to assist them in making web content more inclusive, ensuring that websites and applications are accessible to all. The web accessibility technical playbook focuses on the techniques for implementing accessibility across different web page elements, such as headings, lists, images, multimedia, dynamic content, forms, etc. It includes the following techniques:

  • Techniques that should be avoided, keeping in mind accessibility.
  • Techniques for enhancing accessibility.

Understanding Web Accessibility

Web accessibility is not just a phrase in the digital age where the internet is the portal to information, services, and opportunities; it is a requirement. Millions of people use websites and web applications every day for connecting, learning, working, and shopping. Without accessible web material, accessing the digital world can be difficult for those with impairments.

Web accessibility strives to close this gap by enabling seamless access to and interaction with online material for all users, irrespective of their skills. A strong instrument has been created to support this cause: the Web Accessibility Technical Playbook.

Know more What is Web Accessibility?

Why is a playbook essential?        

The Web Accessibility Technical Playbook is assembled to help the technical team working for a given website to make it accessible for the end users.

It comprises examples, both good and bad, available on a given website. It lists out the code snippets to help the technical team implement accessibility. It is thus a useful reference for the technical team to implement accessibility during the designing and developing phases of a given website.

Target Audience

The Web Accessibility Technical Playbook is prepared by keeping in mind the entire technical team that works to develop and maintain a given website. These include:

  • UI Designers
  • Developers
  • UX Professionals
  • Quality Assurance Engineers

Key Components of the Playbook

Building BlocksAspects
Guidelines and Best PracticesThe playbook provides detailed guidelines and best practices for various aspects of web development, including HTML, CSS, JavaScript, multimedia, and user interface design. These guidelines help developers create accessible web content from the ground up.
Tutorials and How-To GuidesIt offers step-by-step tutorials and how-to guides, making it easier for web professionals to implement accessibility features. Topics include creating accessible forms, ensuring keyboard navigation, and designing accessible color schemes.

BarrierBreak’s Visionary Web Accessibility Technical Playbooks – Building a Digital World for All

Elevate your digital presence by prioritizing accessibility with BarrierBreak’s Web Accessibility Technical Playbook Creation services. BarrierBreak specializes in crafting comprehensive playbooks designed to make your digital presence universally accessible, ensuring that no one is left behind in the online experience.

BarrierBreak is committed to creating playbooks that prioritize inclusivity. Benefit from our expertise in inclusive design to make your website and applications accessible to everyone, regardless of abilities.

From coding practices to content presentation, the playbooks cover every aspect of web accessibility. Empower your development and design teams with detailed guidelines for creating an inclusive online environment.

Unlocking Web Accessibility: Practical Example for Inclusive Design

Let’s choose a relevant scenario of booking travel tickets. A traveler with a mobility impairment attempts to book a flight ticket online. He faces challenges on websites’ interactive elements that lack clear focus outlines, making it difficult to select options and complete the booking process with a keyboard.

Here is a detailed breakdown of the problem:

Mobility Impairment: The traveler has a mobility impairment, which means he may have limited or no use of his limbs, making it difficult or impossible for him to use a traditional computer mouse. Instead, he relies on a keyboard or other assistive devices for navigation and interaction with websites.

Booking a Flight Online: The traveler’s goal is to book a flight online, which is a common task for travelers in today’s digital age. Booking a flight typically involves a series of steps, including selecting travel dates, destinations, flight options, providing personal information, and making payment.

Lack of Clear Focus Outlines: Some airline websites lack clear focus outlines, which are essential for keyboard navigation. A focus outline is a visible indicator that shows which element on a webpage currently has keyboard focus. Without this outline, it becomes challenging for users to determine where they are on the page and which element they are interacting with.

Selecting Options: When booking a flight, the traveler needs to interact with various form fields, buttons, and dropdown menus. Without clear focus outlines, he may have difficulty identifying and selecting the correct options. This can lead to frustration and errors in the booking process.

Completing the Booking Process: The booking process involves multiple steps, and each step may have its own set of challenges due to the lack of focus outlines. This can include difficulties in entering personal information, selecting seats, adding special requests, and making payments. Completing the booking successfully may become an arduous task.

Keyboard-Only Navigation: Since the traveler cannot use a mouse, he relies on keyboard-only navigation. This means he uses tab, arrow keys, and other keyboard shortcuts to move through the website’s elements. Without proper focus outlines and keyboard accessibility, his ability to navigate and interact with the website is severely compromised.

Accessibility Barriers: The absence of clear focus outlines is an accessibility barrier that discriminates against individuals with mobility impairments. It goes against the principles of web accessibility, which aims to ensure that websites and web applications are usable by all, including people with disabilities.

Interesting Read: Are you looking for an accessible booking form for scheduling meetings?

Unveiling the Solution – The Web Accessibility Technical Playbook Approach

Let’s look at the accessibility barrier of the visual focus indicator not being visible on a website, as mentioned below, and see how it’s explained in the playbook.

Visual focus indication on the screen aids users in determining their position within a web page. Without a distinct focus indication, users may encounter challenges in discerning their location within a particular web page. Clear focus indication is extremely useful for users with mobility disabilities and those with low vision as they rely on a keyboard to interact with a web page.

WCAG Success CriteriaWCAG Conformance Level
2.4.7 (Focus Visible)AA
1.4.11 (Non-Text Contrast)AA

How to implement?

This section outlines the steps required to ensure that keyboard focus is readily discernible on interactive elements.

UI Designers Need To…

  • Be aware that every web browser automatically displays a default focus outline when users navigate between interactive webpage elements (such as links, buttons, form controls, image links, etc.) using the “Tab” key.
  • Employ the CSS focus pseudo-class to incorporate a custom visual focus indicator for various interactive elements.
  • Specify a value for the CSS opacity property that is greater than zero.
  • Utilize a CSS outline property value that is clearly visible.
  • Verify the visual focus indicator’s contrast ratio for each component to ensure that, when the component is focused, there is enough contrast with the adjacent colors.
    Tip: This is true unless the user agent controls the component’s appearance, and the author has no influence over it.

Note: Instead of positioning content off-screen, use the CSS ‘display: none’ property to hide it. Content placed off-screen might still receive keyboard focus, especially if it contains native HTML elements, such as <a>, <button>, or <input> elements. In addition to 2.4.7 Focus Visible, when a component is focused, the visual focus indicator needs to have at least a 3:1 contrast ratio with the adjacent color.

Practices To Apply and Avoid

  • Make sure that focusable elements do not have negative tabindex values set. This ensures that these elements are focusable through tab navigation.
  • Ensure that focus is clearly visible for all the interactive elements on a page.

For example, on a website, when accessing the link (e.g., “About Us”) through the keyboard, it is easy to navigate through the links with ease, thanks to the evident focus indicator which allows users to identify their current location on the page.

About Us link in focused state having a black color outline to convey clear focus indicator.

CSS Code Snippet for the “About Us” link with a clear focus indicator:

a:focus {
box-shadow: 0 0 0 1px #fff, 0 0 0 4px #FFFFFF !important;
outline: 1px solid transparent !important;
border-radius: 2px;
outline-offset: 2px !important;
}

Make certain that there is an adequate color contrast between the focus indicator and its adjacent colors.

Read More link with sufficient color contrast for the focus indicator with the adjacent color.
Screenshot showing contrast ratio for the focus indicator of the Read More link with adjacent background as 4.6:1.

Ensure opacity property of CSS has a value greater than 0 if it is used for indicating focus.

Read More link with sufficient color contrast for the focus indicator with the adjacent color.

CSS Code Snippet for the “Read More” link with opacity property set:

a:focus {
box-shadow: 0 0 0 1px #fff, 0 0 0 4px #000 !important;
outline: 1px solid transparent !important;
border-radius: 2px;
outline-offset: 2px !important;
}
a:focus, a:hover {
opacity: 1;
}

Refrain from using “outline: 0” or “outline: none” in CSS to conceal the focus indicator.

For example, on a website, no focus indicator is visually available as the user tabs through the “Subscribe” button using a keyboard.

Subscribe button without a focus indicator.

CSS Code Snippet for the “Subscribe” button with “outline: none” property set:

input.btn-secondary-new:focus {
outline: none;
}

Avoid employing identical colors for both the focus indicator and the background color.

For example, on a website, identical colors are used for the focus indicator and the background.

Contact Us link in focused state with identical colors used for the focus indicator and the adjacent color.

CSS Code Snippet for the “Contact Us” link with identical color for both focus indicator and background:

a:focus {
box-shadow: 0 0 0 1px #fff, 0 0 0 4px #fff !important;
outline: 1px solid transparent !important;
border-radius: 2px;
outline-offset: 2px !important;
}

Refrain from using a CSS property with an opacity value less than 0.

User Groups Affected

  • Users with mobility disabilities
  • Low vision users
  • Elderly users

How to test for Accessibility?

To test a web page for visible focus indicator, perform the following steps:

  1. Open the web page that needs to be tested.
  2. Using Tab key navigate to the page and check if focus is clearly visible on all the interactive elements as you tab through them.
  3. If the focus indicator is not visible, then it is an accessibility violation as per WCAG 2.2 success criteria 2.4.7 at Level AA.

Conclusion

The Web Accessibility Technical Playbook is a powerful tool in the mission to make the internet a more inclusive space. By following its guidelines and best practices, web professionals can contribute to a digital world where accessibility is not an afterthought but an integral part of every online experience. In doing so, they unlock the potential for a more accessible, equitable, and empowering web for all. Get in touch with sales@barrierbreak.com to know how we can support your organizations accessibility needs.

This article by Priyanka Mhatre is a part of our BB Geek series where BarrierBreak team members share their expertise on accessibility and inclusion, drawing from their extensive experience in the field.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top