WCAG 2.0 Checklist for UX Designers

accessibility

#1

I’ve been working on a Skillshare class about Accessibility for UX design. I’m basing the conversation around W3C’s WCAG 2.0 Checklist, which is a checklist of both technical and design considerations when reviewing a site for usability concerns.

As I ran through class preparation, I ran into an issue with this tactic. So much of what’s in the WCAG guidelines is geared towards development professionals. As UXers are often not coders, this presents issues when deciphering what issues we should document from a UX perspective when reviewing sites for accessibility concerns.

To that end, I created a WCAG 2.0 Checklist for UX Designers to help review for accessibility issues. Although checking off all of the issues here won’t give a full pass on a WCAG review, it’s my hope this checklist will help UX professionals begin the process of accessibility issues and take ownership of issues in the guidelines that fall under our domain.

I hope you’ll find this checklist helpful! I’d love to hear any thoughts or feedback you have. For those wo don’t want to download the linked PDF, I’ve included the checklist below.


Section 1: Make Site Perceivable

1. Do all important images have alt attributes?
Important images that convey content or important information should have alt attribute content that conveys the same content or information as the image in written form. Images like icons or decorations need not have alt ext attributes.

2. Does video content have either closed captioning, open captioning, or a transcript available?
All captioning or transcripts should convey all information and content included in the video. (Audio Impairment / Visual Impairment)

3. Is color alone used to convey meaning or information?
Color alone should never be used to convey meaning or information. (Visual Impairment)

4. Does the site have at least a 5:1 contrast ratio between text color and background color?
At least a 5:1 contrast ratio is necessary to allow partially visually impaired users to read text. (Visual Impairment)

Section 2: Make Site Operable

1. Is it possible to navigate to all links on a page using the keyboard only?
Passing keyboard navigation tests is an important threshold for those with impaired fine motor skills. (Physical Impairment)

2. For pages with a search form, is it possible to navigate to all search form field and submit a search using only the keyboard?
Passing keyboard navigation tests is an important threshold for those with impaired fine motor skills. (Physical Impairment)

3. Does the cursor get trapped anywhere on the page when attempting to navigate by keyboard only?
Passing keyboard navigation tests is an important threshold for those with impaired fine motor skills. (Physical Impairment)

4. Is there any flashing content on the site?
Flashing content may present a seizure risk and is not consider good UX practice in any case. Flashing content should be avoided under all circumstances. (Cognitive Impairment)

Section 3: Make Site Understandable

1. Does the site contain any jargon, unusual words, acronyms, or abbreviations without providing a mechanism to identify and define each?
These elements can be difficult to discern and retain for those with learning disabilities or other cognitive impairments, such as short-term memory loss. If these pieces are used, a mechanism to define the meaning of each should be used, such as linking to a dictionary definition. (Cognitive Impairment)

2. Is the page content written at no more than a 9th grade reading level?
Run the page copy through a readability checker such as readability.io. If the readability level is higher than 9th grade, revise the content by reducing the number of words per sentence and number of sentences per paragraph. (Cognitive Impairment)

Section 4: Make Site Robust

1. Is the destination and context of each link clear when read out of context?
Links text should be descriptive of destination and content to allow for ease of use with screen readers and assistive technology (Visual and Physical Impairments)

2. Is the content of each section clearly defined with a header that makes sense when read out of content?
Many screen readers and assistive technology allow navigation by jumping from header to header. Each content section should have a header that is descriptive of the content when read out of context. (Visual and Physical Impairments)

3. Do the first two sentences of each paragraph make sense when read out of context?
Many screen readers and assistive technology allow navigation by jumping from paragraph to paragraph. Each content paragraph should have solid topic sentences that are descriptive of the paragraph content when read out of context. (Visual and Physical Impairments)

4. Are buttons used only to complete an action, such as submitting a form?
Buttons should only be used to complete actions and never for navigation. (Visual and Physical Impairments)

5. Are links only used for navigation?
Links should never be used to complete a task. This can cause errors in assistive web browsers. (Visual and Physical Impairments)


#2

Whoa! That’s amazing!


#3

Thanks, I’m very glad you like it! I’m also working on a UX Accessibility Toolkit that will list tools we can use to test each of these. That will be available in the class, once it’s up (which should be next week!)


#4

Great stuff Doug, this could be really useful. Looking forward to the toolkit!


#5

Thanks for all the hard work you’ve put into this–I’m bookmarking your comments.

Cheers,

Vickie


#6

Thank you very much for the kind words! I hope my class will be helpful, when it comes out, but in the meantime I’ll always be around here :slight_smile:


#7

Good stuff! To anybody who is interested in this topic, then this talk I gave last year might be of interest - https://deanbirkett.name/accessibility-for-ux-designers


#8

This is great! Came across this as I have been looking for ways to help our designers design with accessibility in mind. Thank you for putting this together!