Accessibility essentials: The 13 guidelines of POUR
Website accessibility refers to a set of standards and guidelines that allow people with disabilities to access websites and obtain the information they need.
The Web Content Accessibility Guidelines (WCAG) provide an industry-standard roadmap to make web content more accessible.
The current standard for web accessibility is WCAG 2.2, which is divided into four core principles (POUR):
- Perceivable
- Operable
- Understandable
- Robust
Let’s break down these four principles and their 13 associated guidelines, explaining how each enhances accessibility.
Perceivable
The information must be presentable to users in ways that anyone can perceive.
- Guideline 1.1: Text Alternatives—Provide text for non-text content, such as alternative text for images or icons, so it can be interpreted by screen readers.
- Guideline 1.2 Time-Based Media: Create text alternatives for videos and audio, such as close captions, transcripts, and audio descriptions to accommodate hearing or vision impairments.
- Guideline 1.3 Adaptable: Design content that can be presented in different formats without losing information or structure. Examples include allowing users to switch to simpler layouts or to use a screen reader without losing content. For example, test your site for this by using Safari Reader mode or rotating your device between landscape and portrait mode.
- Guideline 1.4 Distinguishable: Make it easier for users to see and hear content, separating the foreground from the background. This includes sufficient contrast ratios, distinguishable links, accessible audio content controls, and ensuring background music doesn’t interfere with dialogue.
Operable
UI components must be provided in a way that any user can operate them.
- Guideline 2.1 Keyboard Accessible: Ensure that all functionality can be accessed using only a keyboard, important for users who cannot use a mouse.
- Guideline 2.2 Enough Time: Give users enough time to read, use, and interact with content, including features to pause, stop, or extend time limits.
- Guideline 2.3 Seizures and Physical Reactions: Avoid content that can cause seizures or physical reactions, such as flashing lights or quick animations. For example, any content should not flash more than three times within 1 second.
- Guideline 2.4 Navigable: Provide ways to help users navigate, find content, and know where they are, which includes using descriptive links, by adding
skip to contentlink, by not removing the focus outline.
- Guideline 2.5 Input Modalities: Make it easier for users to operate functionality through multiple input methods (e.g., voice control, touch, and stylus).
Understandable
UI components of the web app should be easily understandable.
- Guideline 3.1 Readable: Make text content readable and understandable. This includes using simple language, defining jargon, and allowing for translations if necessary. And setting
langattribute at the top of each page to ensure the screen readers can read the page properly.
- Guideline 3.2 Predictable: Make web pages operate in predictable ways, by keeping consistent navigation and consistent component usage. For instance, clicking a button should lead to expected actions without unexpected pop-ups.
- Guideline 3.3 Input Assistance: Help users avoid and correct mistakes by providing clear error messages, instructions, and examples, enhancing form usability.
Robust
Content must be robust enough to work reliably with a wide variety of technologies, including current and future user agents and assistive technologies.
- Guideline 4.1 Compatible: Maximize compatibility with current and future user agents, including assistive technologies. Ensure code is clean and follows standards, allowing screen readers and other assistive devices to process it accurately.
If you enjoyed this article, please Clap, Comment, and Connect with me! 🌐
References :
