WCAG 2.1: The Key Guidelines added to WCAG 2.0

The Web Content Accessibility Guidelines (WCAG) version 2.0 has is a respectable standard in providing recommendations for making web content more accessible. WCAG 2.0 was published on December 11th, 2008.

Almost ten years later, on June 5th, 2018, the World Wide Web Consortium’s (W3C) Web Accessibility Initiative (WAI) published WCAG version 2.1.

WCAG 2.1 incrementally advances, and is backwards compatible with, WCAG 2.0 and extends accessibility guidelines for three key groups of users:

Users that use mobile devices.
Users with low or impaired vision.
Users with cognitive or learning disabilities.

If your website already conforms to WCAG 2.0, the following guidelines & success criteria are new in WCAG 2.1, for each of the three levels. For an overview of the three levels of WCAG conformance, see our post on An Introduction to Web Accessibility.

WCAG 2.1 – LEVEL A CONFORMANCE

2.1.4 Character Key Shortcuts: This guideline says that, if a keyboard shortcut is implemented using a printable character (i.e. letters, numbers, punctuation or symbol characters), then users must either be able to turn off the keyboard shortcut or remap the shortcut to a non-printable character (i.e. Ctrl, Alt, etc.). Alternatively, if the shortcut is for a UI component, then it should only be active when that component is in focus. For more information on section 2.1.4, see here.
2.5.1 Pointer Gestures: This guideline says that any functionality that uses multipoint or path-based gestures, must be operable by a single-pointer without a path-based gesture, unless a multipoint or path-based gesture is essential. For more information on section 2.5.1, see here.
2.5.2 Pointer Cancellation: This guideline says that for functionality that can be operated by a single pointer, either the down-event cannot be used to execute any part of the function, completion of the function is on the up-event and the function can be undone, the up-event reverses any outcome of the preceding down-event, or completing the function on the down-event is essential. For more information on section 2.5.2, see here.
2.5.3 Label in Name: This guideline says that for any UI components with labels that contain text or images of text, the label name contains the text that is presented visually. For information on section 2.5.3, see here.
2.5.4 Motion Actuation: This guideline says that for functionality that can be operated by device motion or user motion can also be operated by user interface components. Also, responding to the motion can be turned off to prevent accidental actuation except when the motion is used to operate functionality through an accessibility supported interface and when the motion is essential for the function. For information on section 2.5.4, see here.

WCAG 2.1 – LEVEL AA CONFORMANCE

1.3.4 Orientation: This guideline says that content does not restrict it’s view to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential. For more information on section 1.3.4, see here.
1.3.5 Identify Input Purpose: This guideline says the purpose of an input field can be determined when the input field serves a particular purpose and the input is implemented using technology that identifies the expected meaning for form input data. For more information on section 1.3.5, see here.
1.4.10 Reflow: This guideline says content can be presented without requiring users to scroll both vertically and horizontally to see the content. For more information on section 1.4.10, see here.
1.4.11 Non-Text Contrast: This guideline says that UI components and graphical objects must have a contrast ratio of at least 3:1 against adjacent color(s). For more information on section 1.4.11, see here.
1.4.12 Text Spacing: This guideline says no loss of content or functionality should occur in setting all of the following and by changing no other style property: (1) Line height to at least 1.5x the font size; (2) Spacing following paragraphs to at least 2x the font size; (3) Letter spacing to at least 0.12x the font size; and (4) Word spacing to at least 0.16x the font size. For more information on section 1.4.12, see here.
1.4.13 Content on Hover or Focus: This guideline says that when pointer hover or keyboard focus triggers additional content to appear and disappear, then the content must be dismissable, hoverable and persistent. For more information on section 1.4.13, see here.
4.1.3 Status Messages: This guideline says status messages must be determined through role or properties so that they can be presented to the user assistive technologies without receiving focus. For more information on section 4.1.3, see here.

WCAG 2.1 – LEVEL AAA CONFORMANCE

1.3.6 Identify Purpose: This guideline says the purpose of UI components, icons and regions can be programmatically determined. For more information on section 1.3.6, see here.
2.2.6 Timeout: This guideline says users should be warned of inactivity that could cause data loss, unless the data is preserved for more than 20 hours if the user does not take any actions. For more information on section 2.2.6, see here.
2.3.3 Animation from Interactions: This guideline says motion animation that is triggered by a user action can be disabled, unless the animation is essential to the functionality or information being conveyed. For more information on section 2.3.3, see here.
2.5.5 Target Size: This guideline says that tough targets or pointer inputs should be at least 44 by 44 CSS pixels, except when: The target is available through an equivalent link or control on the same page that is at least 44 x 44 pixels; the target is in a sentence or block of text; the size of the target is determined by the user agent and is not modified by the author; and a specific presentation of the target is essential to the information being conveyed. For more information on section 2.5.5, see here.
2.5.6 Concurrent Input Mechanisms: This guideline says content should not restrict the use of input modalities except for when the restriction is essential to convey information, ensure the security of the content or required to respect user settings. For more information on section 2.5.6, see here.

WCAG 2.1 IN A NUTSHELL

The bullet points above are a fairly comprehensive listing of the specific guidelines and success criteria required to conform to WCAG 2.1.

If you’re looking for a brief overview of WCAG 2.1 guidelines, here is a great overview that we recommend: WCAG 2.1 at a glance.

LET’S START THE CONVERSATION

If your website is already conformant to WCAG 2.0 and you’re looking to improve your website’s usability and accessibility to conform to WCAG 2.1, here are a few questions for you to consider:

Are you looking to conform to WCAG 2.1 Level A, Level AA or Level AAA?
Do you have any other website accessibility requirements?
What is your timeline for making your website conformat to WCAG 2.1?
Are you looking for an accessibility audit, or for full-service design and development to make your website accessible?

We would be happy to guide you through this process. Let’s start the conversation — contact us for a free consultation and complimentary website audit. Just fill out the form below and we will be in touch soon.