WCAG 2.1 Guide

The following is a free checklist/guide so that you can better understand what WCAG 2.1 AA is asking for.

Note 1: This is NOT official WCAG documentation but it is a non-technical quick summary (mostly) created to help you better understand what each success criterion is asking for.

Note 2: For the sake of brevity, many details and exceptions have been left out of this outline.  This checklist is best used as a jumping off point for diving into each item in the official documentation.

Note 3: I have separated WCAG 2.0 AA from 2.1 AA even though 2.1 includes all of 2.0.  Always start with the foundational WCAG 2.0 AA success criteria.

WCAG 2.1 AA Checklist

  • Orientation (1.3.4): Style your website so that it does not lock on or require a single display mode
  • Input (1.3.5): Make it so forms can autocomplete information for users.
  • Reflow (1.4.10): Ensure someone can zoom in on your website without requiring scrolling or without causing poor experience.
  • Non-text contrast (1.4.11): All meaningful non-text content on your website should have sufficient contrast with the background.
  • Text spacing (1.4.12): Make sure your text spacing is able to be adjusted without causing a poor experience.
  • Content on hover or focus (1.4.13): Make it so any additional content (e.g. pop-ups, submenus) can be dismissed or remain visible if the user desires
  • Keyboard shortcuts (2.1.4): If you have a keyboard shortcut, make sure a user can either 1) turn it off, 2) there’s a way to add another key in the shortcut, and/or 3) have the shortcut only active while focusing on a specific component
  • Pointer gestures (2.5.1): Provide simple alternatives (e.g. single tap vs. swipe) to potentially complex finger motions on touch screens
  • Pointer cancellation (2.5.2): Provide a way to cancel the trigger when you click down on a mouse or press down/touch with your finger
  • Label in Name (2.5.3): Make sure any programmatic labels you make are aligned with the corresponding visual text
  • Motion Actuation (2.5.4): For any functions that are activated by motion, provide a simpler, alternative means of action. Also, give users the option to turn off motion activation.
  • Status Messages (4.1.3): When a status message appears, it should be coded with role or properties so that people using assistive technologies (e.g. screen readers) are alerted without losing focus

I have created a full WCAG 2.1 guide that explains what to do in Plain English.  You can subscribe below to get this guide (and my 2.0 guide) for free (you will receive an email within 24 hours).



Attribution

The principles and information derive from contents found on the W3.org website. Below is attribution.

Copyright © 2017-2018 World Wide Web Consortium W3C® (MIT, ERCIM, Keio, Beihang). This software or document includes material copied from or derived from WCAG 2.1 as well as the informal Understanding WCAG 2.1 and Techniques for WCAG 2.0 documents. Source W3.org.