Web Content Accessibility Guidelines
Introduction
The Web Content Accessibility Guidelines (WCAG) are the international standards that inform most web accessibility laws across the world.
WCAG has four principles, and they spell out POUR:
- Perceivable
- Operable
- Understandable
- Robust
There are a total of 13 guidelines, each one flowing from one of these POUR principles. Each guideline has success criteria. There are currently 78 criteria in WCAG 2.1, but with the arrival of WCAG 2.2, there will be nine new criteria.
Each criteria is assigned as being either Level A, AA, or AAA.
There are three levels of conformance:
- Level A is the minimum level.
- Level AA includes all Level A and AA requirements. Many organizations strive to meet Level AA.
- Level AAA includes all Level A, AA, and AAA requirements.
Why does WCAG matter?
WCAG is not a law, but a set of standards. And these standards are the basis of some laws:
- Federal websites are subject to following Section 508 of The Rehabilitation Act of 1973. And Section 508's criteria for accessibility comes straight from WCAG 2.0.
- Companies that operate in Canada or who do business there (i.e. some Maritz clients) are subject to a variety of Canadian accessibility laws, some of which are based on WCAG.
- The Web Content Accessibility Guidelines has also been cited in court cases related to The Americans With Disabilities Act. The ADA itself does NOT have any explicit or measurable criteria on how to determine if a site is or is not accessible. That said, the Department of Justice has cited WCAG in dozens of recent ADA cases about web accessibility. In each of these situations, the settlement of the case mentions that part of the settlement agreement is that the plaintiff would conform to WCAG within a certain time frame.
To conform to AA of any version of WCAG, we have to meet all single-A and double-A standards. Legally, don't have to conform to the triple-A standards, but we have to conform to every A and AA Success Criteria, whether we are aiming for WCAG 2.1 or WCAG 2.2.
WCAG Success Criteria, by Level A and Level AA
Level A
- SC 1.1.1: Non-text Content (Level A)
- SC 1.2.1: Audio-only and Video-only (Prerecorded) (Level A)
- SC 1.2.2: Captions (Prerecorded) (Level A)
- SC 1.2.3: Audio Description or Media Alternative (Prerecorded) (Level A)
- SC 1.3.1: Info and Relationships (Level A)
- SC 1.3.2: Meaningful Sequence (Level A)
- SC 1.3.3: Sensory Characteristics (Level A)
- SC 1.4.1: Use of Color (Level A)
- SC 1.4.2: Audio Control (Level A)
- SC 2.1.1: Keyboard (Level A)
- SC 2.1.2: No Keyboard Trap (Level A)
- SC 2.1.4: Character Key Shortcuts (Level A)
- SC 2.2.1: Timing Adjustable (Level A)
- SC 2.2.2: Pause, Stop, Hide (Level A)
- SC 2.3.1: Three Flashes or Below Threshold (Level A)
- SC 2.4.1: Bypass Blocks (Level A)
- SC 2.4.2: Page Titled (Level A)
- SC 2.4.3: Focus Order (Level A)
- SC 2.4.4: Link Purpose (In Context) (Level A)
- SC 2.5.1: Pointer Gestures (Level A)
- SC 2.5.2: Pointer Cancellation (Level A)
- SC 2.5.3: Label in Name (Level A)
- SC 2.5.4: Motion Actuation (Level A)
- SC 3.1.1: Language of Page (Level A)
- SC 3.2.1: On Focus (Level A)
- SC 3.2.2: On Input (Level A)
- SC 3.2.6: Consistent Help (Level A)
- SC 3.3.1: Error Identification (Level A)
- SC 3.3.2: Labels or Instructions (Level A)
- SC 3.3.7: Redundant Entry (Level A)
- SC 4.1.1: Parsing (Obsolete and removed) (Level A)
- SC 4.1.2: Name, Role, Value (Level A)
Level AA
- SC 1.2.4: Captions (Live) (Level AA)
- SC 1.2.5: Audio Description (Prerecorded) (Level AA)
- SC 1.3.4: Orientation (Level AA)
- SC 1.3.5: Identify Input Purpose (Level AA)
- SC 1.4.3: Contrast (Minimum) (Level AA)
- SC 1.4.4: Resize Text (Level AA)
- SC 1.4.5: Images of Text (Level AA)
- SC 1.4.10: Reflow (Level AA)
- SC 1.4.11: Non-text Contrast (Level AA)
- SC 1.4.12: Text Spacing (Level AA)
- SC 1.4.13: Content on Hover or Focus (Level AA)
- SC 2.4.5: Multiple Ways (Level AA)
- SC 2.4.6: Headings and Labels (Level AA)
- SC 2.4.7: Focus Visible (Level AA)
- SC 2.4.11: Focus Not Obscured (Minimum) (Level AA)
- SC 2.5.7: Dragging Movements (Level AA)
- SC 2.5.8: Target Size (Minimum) (Level AA)
- SC 3.1.2: Language of Parts (Level AA)
- SC 3.2.3: Consistent Navigation (Level AA)
- SC 3.2.4: Consistent Identification (Level AA)
- SC 3.3.3: Error Suggestion (Level AA)
- SC 3.3.4: Error Prevention (Legal, Financial, Data) (Level AA)
- SC 3.3.8: Accessible Authentication (Minimum) (Level AA)
- SC 4.1.3: Status Messages (Level AA)
WCAG, by POUR principles
Perceivable
Non-text Content
All non-text content has a text equivalent.
Audio-only and Video-only (Prerecorded)
Alternative content is provided for all prerecorded audio and video.
Captions (Prerecorded)
Captions are provided for all prerecorded video.
Audio Description or Media Alternative (Prerecorded)
Audio descriptions or an alternative are provided for all prerecorded video.
Captions (Live)
Captions are provided for live audio content.
Audio Description (Prerecorded)
Audio descriptions are provided for all prerecorded video.
Info and Relationships
All information and structure is available in text or can be programmatically determined.
Meaningful Sequence
Content is presented in a meaningful order.
Sensory Characteristics
Understanding the context of content does not depend on sensory input such as color, sound, or visual orientation.
Orientation
Content does not require a specific orientation or view.
Identify Input Purpose
The purpose of each input field is identified with a label and/or text description.
Use of Color
Color is not the only means of conveying information.
Audio Control
Any audio that plays for more than 3 seconds has controls to pause, stop, or control the volume.
Contrast (Minimum)
All text has a minimum contrast of 4.5:1 to separate it from its background.
Resize Text
Text can be resized up to 200% and still be readable.
Images of Text
Text should be represented as text and not as images with the exception of logos.
Reflow
Content is presented without having to scroll in two directions.
Non-text Contrast
Interface controls have a minimum contrast of 3:1 to separate from adjacent elements.
Text Spacing
Text has appropriate line height and spacing relative to the font size.
Content on Hover or Focus
When content becomes visible on hover, that content must be dismissable, hoverable, and persistent.
Operable
Keyboard
All content must be accessible using a keyboard as the only input method.
No Keyboard Trap
A user must be able to navigate away from a component using a keyboard only.
Character Key Shortcuts
If a keyboard shortcut is implemented using a single character, then users must be able to turn off the shortcut, remap the shortcut, or only activate the shortcut when the component receives focus.
Timing Adjustable
Any time limits for content can be turned off or extended if possible.
Pause, Stop, Hide
Any time-based media that lasts more than 5 seconds has play, pause, and stop controls.
Three Flashes or Below Threshold
Nothing on the page flashes more than 3 times per second, or the flash is below a specific threshold.
Bypass Blocks
Sections of a website that are repeated on multiple pages can be skipped.
Page Titled
All pages have a descriptive title.
Focus Order
The focus order of elements on the page is in a logical order.
Link Purpose (In Context)
The purpose of each link can be determined from the link text alone without needing context from the surrounding content.
Multiple Ways
There is more than one way to locate a specific page in a website.
Headings and Labels
Headings and labels are descriptive.
Focus Visible
It is visually obvious where the current focus is on the website.
Focus Not Obscured (Minimum)
When a user interface component receives keyboard focus, the component is not entirely hidden due to author-created content.
Pointer Gestures
Content can be controlled with a range of input types.
Pointer Cancellation
Prevent accidental pointer input by either not executing functions on down-events, by only completing functions on up-events, or by making sure the action of up-events will reverse the action of the corresponding down-events.
Label in Name
Visible text labels and programmatic names of the same control should match.
Motion Actuation
Any function that can be operated by device motion also has a corresponding component control.
Dragging Movements
All functionality that uses a dragging movement for operation can be achieved by a single pointer without dragging, unless dragging is essential or the functionality is determined by the user agent and not modified by the author.
Target Size (Minimum)
The size of the target for pointer inputs is at least 24 by 24 CSS pixels.
Understandable
Language of Page
The html element programmatically sets the language for the page.
Language of Parts
Content on the page that is written in a different language is programmatically identified.
On Focus
When a component receives focus, the context of the content does not change.
On Input
Changing a component’s settings does not change the context of the content unless the user is notified of the change.
Consistent Navigation
Any navigation that is repeated on multiple pages is consistent.
Consistent Identification
Components that have the same function are consistent across the website.
Consistent Help
If a web page contains human contact details, human contact mechanism, a self-help option, and/or a fully automated contact mechanism, and those mechanisms are repeated on multiple Web pages within a set of Web pages, they occur in the same order relative to other page content, unless a change is initiated by the user.
Error Identification
All input errors are presented to the user in text.
Labels or Instructions
Use labels or instructions whenever input from the user is required.
Error Suggestion
Give suggestions on how to correct errors that are automatically detected and the cause is known.
Error Prevention (Legal, Financial, Data)
Any modifiable data can be reversed, checked, or confirmed (for legal or financial data).
Redundant Entry
Information previously entered by or provided to the user that is required to be entered again in the same process is either: auto-populated, or available for the user to select. Except when: re-entering the information is essential, the information is required to ensure the security of the content, or previously entered information is no longer valid.
Accessible Authentication (Minimum)
A cognitive function test (such as remembering a password or solving a puzzle) is not required for any step in an authentication process unless that step provides an alternative, a mechanism to help assist the user, the test is to recognize objects, the test is to identify non-text context the user has provided to the Web site.
Robust
Parsing (Obsolete and removed)
All markup is formatted according to the language's specifications.
Name, Role, Value
Use name and role attributes when creating custom components.
Status Messages
Make users aware of important content changes with status messages.