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:
https://goo.gl/67Bm24
- Chrome accessibility devtools extension:
https://goo.gl/DvAxi2
- aXe-core:
https://github.com/dequelabs/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:
https://goo.gl/06qEUW
Subscribe to the Chrome Developers YouTube channel for updates on new episodes of A11ycasts:
http://goo.gl/LLLNvf