diff --git a/rules/wcag-compliance/rule.md b/rules/wcag-compliance/rule.md index c92d78b0363..351b1d41e38 100644 --- a/rules/wcag-compliance/rule.md +++ b/rules/wcag-compliance/rule.md @@ -9,54 +9,55 @@ created: 2023-12-22T05:06:33.0000000Z authors: - title: Jayden Alchin url: https://www.ssw.com.au/people/jayden-alchin/ -related: [] +related: + - color-contrast redirects: [] --- -The internet has become a part of daily life, but not everyone uses it in the same way. -Web Content Accessibility Guidelines (WCAG) are a set of formal standards aimed to address this problem. +The internet has become a part of daily life, but not everyone uses it in the same way. **Web Content Accessibility Guidelines (WCAG)** are a set of formal standards aimed to address this problem. + Conform to WCAG and make your website accessible to everyone, regardless of their abilities or the way they navigate it. -## The 4 Principles (P.O.U.R.) +## The 4 principles (P.O.U.R.) WCAG consists of 4 high-level principles. Each principle is broken down into a number of sub-criteria. -### 1: Perceivable +### 1. Perceivable -- Text Alternatives (1.1): Provide text alternatives for non-text content. -- Time-based Media (1.2): Provide alternatives and captions for multimedia content. -- Adaptable (1.3): Present content in different ways without losing information or structure. -- Distinguishable (1.4): Ensure content is readable, with sufficient color contrast and text sizing options. +* Text Alternatives (1.1): Provide text alternatives for non-text content. +* Time-based Media (1.2): Provide alternatives and captions for multimedia content. +* Adaptable (1.3): Present content in different ways without losing information or structure. +* Distinguishable (1.4): Ensure content is readable, with sufficient color contrast and text sizing options. -### 2: Operable +### 2. Operable -- Keyboard Accessible (2.1): Ensure all functionality can be operated via a keyboard. -- Enough Time (2.2): Provide users enough time to read and complete tasks. -- Seizures and Physical Reactions (2.3): Do not design content that is known to cause seizures or physical discomfort. -- Navigable (2.4): Create a navigable and intuitive user interface. -- Input Modalities (2.5): Ensure compatibility with input methods beyond just a keyboard. +* Keyboard Accessible (2.1): Ensure all functionality can be operated via a keyboard. +* Enough Time (2.2): Provide users enough time to read and complete tasks. +* Seizures and Physical Reactions (2.3): Do not design content that is known to cause seizures or physical discomfort. +* Navigable (2.4): Create a navigable and intuitive user interface. +* Input Modalities (2.5): Ensure compatibility with input methods beyond just a keyboard. -### 3: Understandable +### 3. Understandable -- Readable (3.1): Make content readable and understandable. -- Predictable (3.2): Create a consistent and predictable UI. -- Input Assistance (3.3): Help users avoid and correct errors. +* Readable (3.1): Make content readable and understandable. +* Predictable (3.2): Create a consistent and predictable UI. +* Input Assistance (3.3): Help users avoid and correct errors. -### 4: Robust +### 4. Robust -- Compatible (4.1): Optimize compatibility with current and future technologies. +* Compatible (4.1): Optimize compatibility with current and future technologies. ## Key terms The following are some key concepts that can help make WCAG easier to understand. -- **WCAG versioning:** The guidelines are updated at irregular intervals so it's important to be clear which version you're referencing. +* **WCAG versioning** - The guidelines are updated at irregular intervals so it's important to be clear which version you're referencing. E.g. [WCAG 2.2.](https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22) -- **Conformance level:** The degree to which a website complies with WCAG. +* **Conformance level** - The degree to which a website complies with WCAG. Level A is must-have, AA is should-have (a common target), and AAA represents maximized accessibility. -- **Success Criteria:** Each WCAG principle contains sub-categories which themselves contain specific success criteria. +* **Success Criteria** - Each WCAG principle contains sub-categories which themselves contain specific success criteria. This means when you reference a success criterion it will have a number like "2.4.1: Bypass Blocks". -- **WAI-ARIA** (Web Accessibility Initiative - Accessible Rich Internet Applications): +* **WAI-ARIA** (Web Accessibility Initiative - Accessible Rich Internet Applications) - A specification of semantic requirements for assistive technologies like screen readers.