Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

XS✔ ◾ small changes from consistenct "wcag" #9536

Merged
merged 3 commits into from
Nov 5, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 26 additions & 25 deletions rules/wcag-compliance/rule.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<!--endintro-->

## 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.