How to Perform Web Accessibility Testing

So, you’ve spent the time and energy to make sure all the content on your website is accessible. But you cannot skip the final and most commonly overlooked step – testing. It’s important to know how to test for web accessibility, and what to do if you find areas of inaccessibility. Here are some ways you can test for accessibility the right way.

Tools for Testing Web Accessibility

There are tons of free tools that check for common web accessibility issues. Be aware that no automated tool can check for every single accessibility issue, but according to research done by Deque, 57% of accessibility issues could be found through automated testing. That means that manual testing is always required as well, since not all issues are caught using automated tools. For example, a tool may be able to detect if an image has alt text. But it can’t tell if that alt text actually makes sense. 

Using the Keyboard

The simplest tool you can use to test for accessibility is the keyboard. Use the Tab key to shift between focusable elements on a page – that is links, buttons and form controls. You use Shift and Tab to move backwards, and the Enter Key to activate links and buttons. As you tab through the page, you should see a focus indicator, usually a colored border, around the element you are currently on. If you don’t see one, your users won’t be able to tell which part of the page they are on. You can check if there is a “skip to content” link as well, and see if any links open in new tabs without warning.

You can also check that the focus order makes sense, and that there aren’t any parts of the page that are inaccessible with the keyboard alone – for example, a pop-up window. On this Events page, the focus jumps from the Home link in the breadcrumbs to the Home link in the footer. The events, which are part of an accordion, are not accessible without a mouse. If you do find accessibility issues like this with the keyboard, talk to your developer.

Using Website Testers

The simplest automated online testing tool is Wave by WebAim. On this site you can enter any URL and the tool will analyze your site for accessibility. The great thing about using a site like this is that the more you use it, the more you train your eye to find these items as you’re building out a page. Let’s look at each part of this report.

  • The Details tab gives you an in-depth look at the page. You can click on any error and see where it is on the page, and where exactly in the code it is.
  • The Reference tab tells you more about what the error is and how to fix it. If you scroll to the bottom of this window, there’s a link to the relevant WCAG success criterion.
  • The Order tab tells you what links, buttons, dialogs and form controls there are on the page. In this example, the first links listed have no accessible name, but clicking on them doesn’t show them on the page. By turning off the page styles and visiting them in sequence you can see that in fact they are image links in a slider.
  • The Structure tab indicates the structure for the page. That includes landmarks (areas of the page that developers can label to help screen reader users navigate) and headings.
  • The Contrast tab shows any color contrast errors and why they fail. In this example, the white text does not contrast sufficiently with the orange background.

You couldn’t make the white any lighter, but by dragging the slider for the background, you can see that using a darker shade of orange could meet the AA minimum contrast level.

To test pages as a color blind person would see them, you can use Skynet’s Color Blindness Simulator. You can see in this example that the text is harder to make out for people with red-green color blindness.

Using Chrome Extensions

The Accessible Web Helper from Accessible Web is a browser extension for Chrome. It scans pages against WCAG 2.2 AA. You can change this if you want it. The tool tells you what’s wrong with a page for free, but remediation instructions are a paid feature.

The HeadingsMap tool is available as an extension for Firefox or Chrome. It shows you the heading structure for any page. If a page has no headings at all, it will let you know. Any headings which are skipped will show with a red background. Clicking on any heading takes you to that place on the page. You can correct any error by changing the heading to the appropriate level.

The ARC Toolkit is a browser extension from TPGi which works in Firefox and Chrome. You access it through the browser’s developer tools, which you can open by right-clicking on the page and selecting Inspect. Here is an error ARC Toolkit found on a hairstylist’s website. Their sign up form uses placeholders rather than visible form labels.

Another issue ARC Toolkit found on the same site was that the bullets for the testimonials carousel on the page aren’t labelled with the type of component they are, nor do they have an accessible name. Because of this, NVDA reads them out as “blank”.

Using an Accessibility Plugin 

Finally, WordPress users can test their web pages with the Equalize Digital Accessibility Checker plugin. You can see the scan results in the editor at the bottom of the screen. The summary is an overview and the Details tab gives a list of errors, warnings and passed tests. The Reading Level is assessed as well. You should aim for a level of 8 or below.

On your pages, you will see more info about each error, with the Full Documentation link telling you how to fix it. 

Want to know more about making more of your website content accessible? Learn more via our accessible website blog.