WCAG 2.0 Checklist for UX Designers

Process & Techniques
#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)

8 Likes
#2

Whoa! That’s amazing!

1 Like
#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!

2 Likes
#5

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

Cheers,

Vickie

1 Like
#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

2 Likes
#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!

2 Likes
#9

The Web Content Accessibility Guidelines (WCAG) 2.0, developed by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C), provides a set of guidelines to make web content more accessible to people with disabilities. While WCAG 2.0 has been succeeded by later versions like WCAG 2.1 and WCAG 2.2, it’s still valuable to consider the key principles and checkpoints from WCAG 2.0. Here’s a checklist tailored for UX designers:

Perceivable:

  1. Text Alternatives (1.1):

    • Provide descriptive alt text for images.
    • Use text alternatives for non-text content (e.g., charts, graphs).

  2. Time-based Media (1.2):

    • Provide alternatives for time-based media (e.g., captions for videos).
    • Ensure content can be paused, stopped, or extended.

  3. Adaptable (1.3):

    • Create content that can be presented in different ways without losing information or structure.
    • Ensure compatibility with assistive technologies.

  4. Distinguishable (1.4):

    • Use sufficient color contrast between text and background.
    • Ensure text is resizable up to 200% without loss of content or functionality.

Operable:

  1. Keyboard Accessible (2.1):

    • Ensure all functionality is accessible via the keyboard.
    • Provide keyboard shortcuts for interactive elements.

  2. Enough Time (2.2):

    • Provide users with enough time to read and use content.
    • Allow users to control time-sensitive content.

  3. Seizures and Physical Reactions (2.3):

    • Do not design content that is known to cause seizures or physical discomfort.

  4. Navigable (2.4):

    • Provide clear and consistent navigation.
    • Create a logical tab order through interactive elements.

Understandable:

  1. Readable (3.1):

    • Use clear and simple language.
    • Provide consistent navigation and formatting.

  2. Predictable (3.2):

    • Make functionality predictable and consistent.
    • Provide feedback on user actions.

  3. Input Assistance (3.3):

    • Help users avoid and correct errors.
    • Provide clear instructions and labels for form elements.

Robust:

  1. Compatible (4.1):
    • Maximize compatibility with current and future user agents, including assistive technologies.
    • Use valid code and follow coding standards.

General:

  1. Testing:

    • Regularly test your designs with assistive technologies and various browsers.

  2. Documentation:

    • Document accessibility features and considerations.

  3. Training:

    • Train development and design teams on accessibility principles.

  4. User Feedback:

    • Solicit feedback from users, including those with disabilities, to identify and address accessibility issues.

Remember that this checklist is a starting point, and it’s advisable to refer to the full WCAG 2.0 documentation for detailed information on each guideline and how to implement them effectively. Additionally, consider checking for updates and using later versions of the WCAG as they provide more comprehensive guidance.

#10

Provide alternative text (alt text) for all non-text content, like images, graphics, and videos. Describe their purpose and function accurately.

#11

Hello,

#12

Great checklist for the WCAG.

To make any Shopify website WCAG compliance Here I recommend Shopify app >> Accessibility Assistant For ADA & WCAG 2.1 Compliance (Just search in Shopify app store)

Which is developed by CartCoders

#13

The Accessibility Assistant app you recommend by CartCoders could be a helpful tool. It can assist in identifying accessibility issues on your Shopify store, saving you time and effort in the initial audit phase.