WCAG Guidelines

WCAG

As of early 2021, current Web Content Accessibility Guidelines (WCAG) standard is 2.1. At the core WCAG is based on 4 product design principles:

• Perceivable
• Operable
• Understandable
• Robust

There are 3 compliance levels with WCAG: A, AA and AAA, AA being the most common one. The following points from each are most relevant to us as of WCAG 2.1:

A: Minimum level

As a bare minimum, a website needs to be accessible, standards in Level A have a very low impact on the user interface design of the site, as they deal mainly with how information is presented. Level A improves the UX for everyone, ensuring clean and modern coding, as well as giving options on how to consume the information.

• 1.1.1 – Non-text Content: provide text alternatives for non-text content
• 1.3.2 – Meaningful Sequence: Present content in a meaningful order.
• 1.3.3 – Sensory Characteristics: Instructions don’t rely solely on sensory characteristics.
• 1.4.1 – Use of Colour: Don’t use presentation that relies solely on colour.
• 2.1.1 – Keyboard: All functionality is accessible by keyboard with no specific timings.
• 2.1.2 – No Keyboard Trap: Users can navigate to and from all content using a keyboard.
• 2.2.1 – Timing Adjustable: Provide user controls to turn off, adjust or extend time limits.
• 2.2.2 – Pause, Stop, Hide: Provide user controls to pause, stop and hide moving and auto-updating content.
• 2.4.1 – Bypass Blocks: Provide a way for users to skip repeated blocks of content.
• 2.4.3 – Focus Order: Components receive focus in a logical sequence.
• 2.4.4 – Link Purpose (In Context): Every link’s purpose is clear from its text or context.
• 2.4.7 – Focus Visible: Keyboard focus is visible when used.
• 3.1.1 – Language of Page: Page has a language assigned
• 3.3.1 – Error Identification: Clearly identify input errors
• 3.3.2 – Labels or Instructions: Label elements and give instructions
• 4.1.2 – Name, Role, Value: Build all elements for accessibility

AA: Medium level, includes A and AA (most used)

Level AA compliance often requires some changes to the design. In many ways, it is a step further on the web accessibility journey, as it builds upon previous standards, but it also introduces new ways to make a website accessible.

• 1.3.5 – Identify Input Purpose: The purpose of input fields must be programmatically determinable.
• 1.4.3 – Contrast (Minimum): The contrast ratio between text and background is at least 4.5:1
• 1.4.4 – Resize Text: Text can be resized to 200% without loss of content or function.
• 1.4.11 – Non-Text Contrast: The contrast between user interface components, graphics and adjacent colours is at least 3:1.
• 2.4.6 – Headings and Labels: Headings and labels describe the topic or purpose.

AAA: Highest level, includes A, AA, and AAA (not always achievable)

More information

• WCAG 2.1 Website Compliance
• WCAG Checklist
• Understanding WCAG 2.1
• Understanding the WCAG Conformance Levels A, AA, and AAA – Web Accessibility FAQ