Web accessibility in check – process workflow and tools

One of the essential responsibilities of web developers is to ensure that our digital products are accessible. In this article, I walk you through the process we established at Data4Life when it comes to analyzing the accessibility success criteria for our websites and web applications.

Meet Aliyah

Before we move into the specifics, I’d like you to consider the perspective of my friend, Aliyah. She lives with blurred vision and uses assistive technologies, like a screen reader, to navigate the web.

Figure 1: A web page as it is presented (left) compared with a simulation of what Aliyah sees (right).

Aliyah's screen reader tells her what is displayed on a website and helps her to choose a desired action. She can hear the headlines as she browses a news site and the page’s images are described to her.

Figure 2: Aliyah uses a screen reader like VoiceOver to hear the headlines on a news website.

Aliyah also manages to book a flight using only keyboard inputs – navigating through the required form fields, selecting a destination, and choosing travel dates.

Figure 3: Aliyah navigates a travel website using only a keyboard.

Though developers are able to take advantage of many technologies to improve the experience for people with disabilities, only 2 percent of home pages meet the web accessibility standards. Aliyah's positive experience while browsing the web is true only for a very small portion of the web today!

Only 2 percent

People like Aliyah encounter frequent barriers while browsing the web – a sad truth about the current state of digital accessibility. WebAim recently conducted a case study analyzing 1 000 000 home pages. It discovered that 98 percent of them are failing the Web Content Accessibility Guidelines.

As increasing numbers of people and organizations turn to digital solutions during the COVID-19 pandemic, it’s more important than ever that we deliver accessible website experience.

To help you detect and resolve potential accessibility issues before they reach your production environment, I’d like to share a list of procedures you can consider in your next accessibility audits.

Accessibility checklist

The following checklist provides me with a solid understanding of how accessible Data4Life's applications and websites are. It also makes it easier for me to give well-structured feedback to the management team.

The checklist includes automated testing tools and manual checks using various techniques.

🕵️‍♀️ Identify any critical issues using an automated testing tool. Be sure to expand the coverage to as many as possible pages and views, not only the landing page. I recommend the following solutions:

• Lighthouse – part of the Chrome DevTools and also available as a continuous integration module with Lighthouse-CI. It’s relatively easy to configure the latter as an automated check on each pull request to your project repository.

• Accessibility Insights – available as a browser extension as well as an application for Android and Windows. It has two main modes: FastPass, a lightweight check for the most critical problems, and Assessment, a comprehensive analysis. A feature I like and use often is TabStops which visualizes the tab order and helps identify issues with the keyboard access.

⚫️ Blackout your screen or display (using, for example, Screen Curtain on macOS) and try to complete a set of actions for your website or app while only using a screen reader. This test ensures the correct functionality and experience for people with visual impairments. It also identifies potential areas you can improve in terms of proper and meaningful announcements. Moreover, it can increase the team’s empathy for people with visual impairments.

⌨️ Navigate through the page using only the keyboard. This test checks if the elements’ focus state is present/visible and the focus flow is unbroken.

🖼 Evaluate the page content – hierarchy, page structure, image description, and suchlike. I recommend the WAVE browser extension as it provides a quick reference for the evaluation items previously mentioned. WAVE also has the option to turn off all styles, giving you another perspective on the order of page elements.

Figure 4: A look at the WAVE browser extension features and the page hierarchy of the nytimes.com website.

🎨 Verify the color contrast. Many browsers already integrate checks for sufficient color contrast into their development tools. However, all the aforementioned tools should also be able to check for sufficient color contrast.

Figure 5: Chrome DevTools feature for checking the color contrast.

📊 Use a grayscale filter to check if color is the only identifier of information. It’s very important not to rely only on color as a visual identifier of information. That’s especially true for diagrams or charts, but it’s a common oversight in links without an underline, too. This check also verifies the general readability of the content.

Figure 6: Comparison of normal and gray filtered version of the Data4Life homepage.

The approach I’m using for each platform is:

• Web – using the Stylus browser extension (Chrome, Firefox) and the CSS property "filter: grayscale(100%);".
• iOS – from the Settings menu, General > Accessibility > Display & Text Size > Colour Filters.
• Android – from the Settings menu, Digital Wellbeing & parental control > Wind Down.

Build your own workflow

The accessibility checks and tools above are of course only one possible strategy when it comes to auditing digital projects. This approach will give you a solid foundation upon which you can build your own practices to enhance it further.

There are other areas, out of the scope of this article, that we can also analyze from an accessibility point of view. For example, testing custom widgets or components, proper use of ARIA attributes, meaningful announcements across the most common screen readers for each platform, and more.

I encourage you to be the web accessibility ambassador in your organization and to raise awareness for common issues. Through this, I’m sure we can collectively increase the percentage of accessible content on the web very soon ✌️