WCAG 2.1 AA in 5 Minutes
by Hugo Valcourt, Founder, Senior Front-end Developer
1. Perceivable
Users need to be able to perceive the content through their senses, mainly sight and hearing.
Alt text for images: Provide descriptive text (alt attributes) for images so that screen readers can describe them to visually impaired users.
Captions for videos: Include captions for videos to ensure deaf or hard-of-hearing users can understand the content.
Color contrast: Ensure a contrast ratio of 4.5:1 between text and background to make the content readable.
2. Operable
Users must be able to navigate and interact with the interface.
Keyboard navigation: All interactive elements should be accessible via keyboard alone (no mouse required).
Visible focus: Ensure it’s easy to see which element is currently selected when navigating with a keyboard.
Sufficient time: Allow users enough time to read and interact with content, or provide a way to adjust the timing when necessary.
3. Understandable
Users need to be able to comprehend the information and how the interface works.
Language specification: Set the language of the page in the HTML code so that screen readers interpret the content correctly.
Clear instructions: Provide clear and simple instructions, especially in forms.
Prevent input errors: Make it easy for users to correct form errors by providing clear error messages.
4. Robust
Content should be interpreted reliably across a wide range of browsers, assistive technologies, and devices.
Screen reader compatibility: Ensure the HTML is properly structured so that screen readers can interpret the content correctly.
Form labels: Use proper form labels to ensure that fields are clearly labeled for assistive technology.
Summary
By following these basic principles of WCAG 2.1 AA, you ensure that your web content is accessible to a wider audience, including people with visual, auditory, motor, or cognitive disabilities. Meeting these guidelines also improves the overall user experience, especially on mobile devices and in low-bandwidth conditions.
This can be summarized into four major principles: making content perceivable, operable, understandable, and robust.