Do you make your website WCAG compliant?

Last updated by Jayden Alchin [SSW] 7 months ago.See history

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

WCAG consists of 4 high-level principles. Each principle is broken down into a number of sub-criteria.

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.

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.

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.

4: Robust

  • 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. E.g. WCAG 2.2.
  • 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. 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): A specification of semantic requirements for assistive technologies like screen readers.
Jayden Alchin
We open source. Powered by GitHub