How to do a basic accessibility audit on your site

Here are some tools and methods for running an accessibility audit on your site. This can be a little bit easier if you already have a design system or component library in place, but it isn’t necessary to gain some insights into how your site can be more accessible.

The way I usually do it is I first run some automated accessibility checkers, then I do some manual testing. I’ll unpack what this means below.

Note: most of this information is a summary of the W3C’s WCAG site, which is the authority on recommendations regarding web content accessibility. The content on that site can be a little dense so hopefully this provides a good summary and jumping off points.

Free automated accessibility checkers

One thing that is important to remember when using automated tools is that they are not perfect. Just because your site “passes” an automated check doesn’t mean that it is accessible. Also if your site has errors, that doesn’t necessarily mean that it is inaccessible.

Web accessibility evaluation tools can not determine the accessibility of Web sites; they can only assist in doing so.
Source

That being said, it is still quite valuable to run automated checkers on your sites because they can assist in catching errors before manual testing takes place.

One of the more popular automated checkers is WAVE by WebAim. This site allows you to enter a URL and then get a live preview of your site with highlighted accessibility issues in there. It certainly isn’t perfect because it can report some false positives, but it’s a great way to catch obvious issues and contrast errors.

Image of accessibility audit on my site through WAVE.
WAVE’s accessibility audit

Further reading

Manual testing

Here is where the “real” accessibility testing comes in. I say “real” because these methods are actually emulating how users with disabilities actually use your site. Manual testing also can help find gaps in your automated testing.

Keyboard navigation

A basic principle of WCAG 2.0 recommendations is that your site should be operable using nothing more than a keyboard. Give it a shot. Run through your site using your keyboard by pressing tab. Many users with limited motor control rely on keyboard navigation to navigate web sites.

  • Can you access all the links in a logical order?
  • Does advanced functionality like carousels work with keyboard controls?

Reading up on the tabindex attribute can provide enough know-how to make your site way more accessible.

Using voiceover or screen readers

I’m on a Mac so it was quite eye-opening for me to browse sites using the built in Voiceover functionality that comes with all Macs. Using Voiceover shed some light on accessibility principles that I never really understood properly.

For example, we all know the basic rule-of-thumb that alt text is good to use on images. But when using Voiceover, alt text can actually hinder understanding of certain elements such as images with text over them.

Consider this simple image block:

Image block example with text overlay

This image block has alt text of “Student at computer,” which most accessibility novices would assume is a good thing. However, Voiceover reads this element as “Link, Online MBA ranks highest in state student at computer.” This is less than ideal because it is actually less meaningful than if it had alt=””. In situations like this, screen readers tack on alt text to the text that is in the element. By using alt=”” in these situations you can be sure that screen readers will obtain the true meaning of the element.

This is a great example of something that can only be caught using manual testing.

In closing

This was a very brief overview of some tools, resources, and techniques to test your site against WCAG 2.0 accessibility recommendations.

To take it to the next level, there is no substitute for reading the WCAG 2.0 site and browsing through the quick reference provided by the W3C on how to meet the recommendations.

Happy auditing!