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:

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.

[sebapombo]

Congratulations Rob. The video is very clear and precise regarding the importance of implementing good practices when programming web applications. It is also clear how important this is for people with reduced abilities and poor vision.

[lordpixel]

Thank for this informative video, a11y is very important, but spreading the word and creating awareness is also important, you are contributing to that goal.

[isralDuke]

This is great! I did most of this already, but you showed off some things I didn’t know.

[gp]

Thanks, Rob! Awesome overview of your testing process.

[deepaksurendar]

Your tutorials are awesome. Thank you.

[heddakortesmaki]

Great information sharing. Very clear and current on web accessibility. Thank you.

[manuelpineda]

Great explanations and information. Thx!

[StyledJavaScript]

Thanks Rob, for the useful check-list.

[racheleditullio]

Very good primer. I'll share with our developers!

[grahamarmfield]

This is a great video Rob, as demystifying accessibility is one of the key ways to open up accessibility knowledge in my view.

One point though, when you interact with the size dropdown at 5:20 using the up and down arrow keys, I'm not hearing any feedback from Voiceover. Did the audio get edited out there, or is that actually a problem in that site?

[aaaa-fgs]

7:36 didn't know nvda can do that, I wonder if this could be used in a day-to-day keyboard navigation of GUIs in general

[HardikDangar]

Thanks, This is awesome list to check accessibility.

[solesole]

Rob ai am a designer so from that point of view what do you recommend (causes, articles, general material, etc) to get better at auditing for accessibility? Thanks

[ShreeRadheShyamAura]

Thanks for this important info. It is awesome. I need your help on how to make a final analysis report in excel to give to the client.

[toma]

Do you that the W3C online validation is accurate with accessibility features, or does not detect everything? Thanks a lot.

[pitchforker]

The browser plugin Tota11y is also very useful

[megankennedy]

Thank you so much for how you audit websites! I'm new to this and wondered about color/contrast for images or icons associated with text. For example, sometimes the social media icons next to the text of facebook, or twitter have really poor contrast. Is this a WCAG error, or is it sufficient if the text has enough contrast? I thought it would be an error in case someone with a cognitive impairment and low vision relies on using those icons. In short, when do you check for the color/contrast of images/icons and when do you ignore them to help companies achieve WCAG 2.0 standards?

[ryanreviews]

Anyone know a video that teaches mobile ada like this one? That would be really helpful

[account]

Good one, but can you please help me on this ..
I have some doubts, how to test the elements in the web application like Radio group, checkbox group, Menu etc...

for example :

1. Assume that you have radio group, how we can test this group like how to move between radio buttons using Tab or arrow keys.
2. Assume that you have Check box group, again same question here, how to test this check box group, do we need to use arrow keys or tab key to move between the checkbox and how we can enable and disable the checkbox.
Is there any standards define to test. I am having big confusion here.

[saraholiveedwards]

I wonder how much control I have over these things on a Six site?