How I do an accessibility check -- A11ycasts #11

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