Thursday, 08 November 2018 19:20

How I do an accessibility check -- A11ycasts #11

Written by

Today on A11ycasts I want to give a brief look into the process I use when I'm checking a site for accessibility. This is by no means an exhaustive audit that I'm doing here, but instead a set of quick checks that you can use to highlight any big problem areas. I've found that most sites tend to have issues with at least a few of these checks, and it only takes a few minutes to do it so it's totally worth it for the improved user experience!

Some of the things I look for are:
- Does the tab order make sense and can I reach all controls on the page?
- Is there a clear focus indicator for interactive controls?
- Are there any offscreen elements which should not be focusable?
- Can I traverse the page with a screen reader without getting stuck?
- Is there appropriate alt text on images?
- Do custom controls work with a screen reader?
- Is the user alerted to new content added to the page?
- Are there appropriate headings?
- What about landmark elements?
- Is text high contrast enough to be legible?

And here are some of the tools I like to use:
- Chrome aXe extension:
- Chrome accessibility devtools extension:
- aXe-core:

Sidenote: at 5:18, not sure why the video didn't announce the different sizes but I tried again later and it was working. Maybe a VoiceOver quirk.

Watch all A11ycasts episodes:

Subscribe to the Chrome Developers YouTube channel for updates on new episodes of A11ycasts:

Read 413 times


Global Presence Admin

The views expressed by contributing authors on our blog do not always represent the philosophy and values of Global Presence. They are published for educational and inspirational purposes.