How to Test Online Content for Accessibility

individual interacting with mobile device, surrounded by trails of blue light symbolizing digital information.
Photo by mahdis mousavi on Unsplash

Testing for accessibility can happen in many different ways, from quick and simple to in-depth and technically detailed. In the most general terms, I break accessibility testing into three categories: Automated, Manual, and Usability.

Automated vs. Manual Testing

As the name implies, automated testing is the least labor-intensive form of accessibility testing. Automated testing also typically discovers less than 40% of the issues that affect accessibility. A human brain is required to make several of the determinations that are required for an accessibility assessment.

Because of this limitation, most people who do accessibility testing will employ a combination of automated and manual testing.

Automated testing is a wonderful way to check for all of the programmatic issues that affect accessibility, and a great way to index all of the issues that need to be conformed with in order to satisfy a technical standard such as Section 508 or WCAG.

However, Manual testing is a required element for any thorough accessibility assessment.

Standards vs. Usability

Testing for conformance with accessibility standards is an easy task for automated tools. Testing for Usability is a more varied activity, often times it is best performed by an individual with a disability who regularly uses assistive technology.

For true accessibility you need to satisfy both the standards and the usability requirements that enable the content to be interacted with the same ease of use enjoyed by individuals without disabilities.

Quick and Cursory vs. In-depth and Detailed

For many situations, it is possible to do a quick and cursory test with your keyboard and reveal critical failures that prevent any need for more elaborate testing.

If an app or webpage is not keyboard accessible, it has already failed to conform with the standards and is demonstrably not usable.

AT and Usability Testing

When a student with a disability uses Assistive Technology, they are interacting with your content in different ways than you might expect. Sometimes content is structured in a way that will force students to work harder to engage with the content.

Different types of AT focus on a specific aspect of human communication, and it is not always obvious to people how approaching content from a different sensory perspective and with assistive technology can affect the meaning and understandability of the content.

For the best usability testing, it is recommended to find an individual with a disability who has a high degree of familiarity and comfort with assistive technology. An ideal candidate is someone who uses AT every day as a regular part of their life.

Browser Tools

Most modern browsers will allow you to inspect the code of the web pages you visit. If you are not put off by reading HTML code, the truth is out there and easy to uncover. Just right-click the content and select “Inspect” within the Chrome browser, or select “Inspect Element” within the Firefox browser.

However, for a lot of people, the idea of learning any amount of HTML and trying to read code is a complete deal breaker. That’s OK, you don’t need to get down and nerdy, there are a variety of tools that have been developed for Chrome and Firefox that make it a lot easier to inspect web pages for accessibility.

Here are a few popular options:

  • WAVE Extension: by WebAIM at Utah State University is a free tool for Chrome and Firefox that allows you to perform secure accessibility checks on content within your browser. WAVE applies a graphic overlay with different icons to identify the different types of issues with the content.
  • Color Contrast Analyzer: by North Carolina State University is an extension for Chrome that allows you to check the color contrast ratios of your content and make sure you are satisfying the WCAG 2.1 requirements for contrast.
  • Axe – Web Accessibility Testing from Deque: a free extension for Chrome and Firefox that is helpful in finding issues with content not conforming to the WCAG criteria.

There are many more extensions available in the Chrome Web Store and the Firefox Browser Add-Ons collection.

Try it Out! Keyboard Accessibility

Keyboard with blue and red lighting.
Photo by Jon Spectacle on Unsplash

There is one quick and easy way to do a very basic check of the accessibility of a web page – use the keyboard.

Most of us are so accustomed to using a mouse or trackpad that you might not be aware of how many keyboard commands are available for interacting with your computer. Following are just a handful of common keyboard commands you can start using to test accessibility.

Quick and Cursory

With the keyboard, you can quickly see if there is a basic ability to access interactive elements on a webpage. This is one of the most common accessibility requirements for digital content, and can be a red flag for additional more serious accessibility concerns.

Note: this technique only works if the webpage has interactive content.

Tab it Forward

Before you try this, click inside your internet browser to ensure the computer is focused on the browser.

  • Use the TAB key to move your computer focus from each interactive element on the web page to the next.
  • Try pressing TAB right now and see if you can identify the focus indicator. It is typically a dashed line, though the styling can be overwritten by the website you are visiting.
  • Once you have found the focus indicator, you can track the focus as you press TAB and move through the different interactive elements on the page.

Shift it Backwards

The SHIFT key can be used together with the TAB key to move backwards through the interactive elements on the page.

Interacting with Forms and Menus

If you get to an interactive element that allows you to choose an option, there are standard behaviors that respond to keyboard commands for interacting with the data.

If the content is accessible, you can use the following keys to interact with the options:

  • ARROW keys move between options.
  • SPACE: selects an option.
  • ENTER submits the option.

Considerations for Keyboard Testing

  • When you evaluate web content with the keyboard, consider the overall number of interactive elements.
  • Notice the sequence of interactive elements. Consider whether there are elements that seem like they should be presented sooner than they currently appear in the sequence.
  • Notice whether there is a “Skip to Content” link at the beginning of the page. This will typically take you past the menus for the website – which can take a lot of tabbing to get through.

Keyboard testing is not a conclusive or thorough way of testing accessibility. Also, it is not enough for web content to be keyboard accessible.

Keyboad accessibility is a good start, but there are many other additional considerations for ensuring access of digital content.

With the above information you can start practicing accessibility testing on the content you create and select for your online course.

Thanks for reading!