Below is my quick checklist on how to meet WCAG 2.1 AA for 2020.
I’ve written this in plain English for beginners.
If you would like to get my full WCAG guide, subscribe to Accessible.org for free or you can search Kris’s WCAG 2.1 Guide on Amazon and buy a copy.
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
