What’s New in WCAG 2.1

I field questions pretty regularly about what is coming in WCAG 2.1. I have offered links to the spec, pointers to W3C mailing list email, references to other posts (most recently David MacDonald’s post that looks at the same version as this post), but have avoided gathering them in one place on my own. Part of the reason is because they have been fluid for some time.

Now that the draft is starting to gel, I felt it was far enough along to pull the content and gather it here. There are still some success criteria that may appear in early September, but my schedule suggests I won’t be adding them.

Everything below is pulled from the Web Content Accessibility Guidelines (WCAG) 2.1, W3C Working Draft dated 16 August 2017, but if you are reading this well after that date and don’t care so much, just visit the latest release instead.

New Guidelines

These represent three brand new guidelines under which some of the new success criteria live. As you can see, they are mostly driven by the input modalities that did not exist when WCAG 2.0 was released in 2008.

New Success Criteria

Each success criterion below has more information in the (August 16) draft spec, including links to related GitHub issues, outstanding questions and concerns, and links to the understanding notes for each item. What you see below is just the text for the criterion as it stands on August 16, 2017.

I have further broken them down by level (A, AA, and AAA).

Level A

Four new Level A Success Criteria (so far).

2.2.7 Accessible Authentication (Level A)
Essential steps of an authentication process, which rely upon recalling or transcribing information, have one of the following:
  • alternative essential steps, which do not rely upon recalling and transcribing information; or
  • an authentication-credentials reset process, which does not rely upon recalling and transcribing information
Exceptions:
  • Authentication process involves basic identifying information to which the user has easy access, such as name, address, email address and identification or social security number.
  • This is not achievable due to legal requirements.
2.4.11 Character Key Shortcuts (Level A)
If a keyboard shortcut consisting entirely of one or more character keys is implemented by the content, then a mechanism is available to turn it off or to remap it to a shortcut that uses at least one non-character key.
2.7.1 Accessible Name (Level A)
Where an active control has a visible label, the accessible name for the control includes the text string used for its visible label.
3.2.6 Accidental Activation (Level A)
For single pointer activation, at least one of the following is true:
  • Activation is on the up-event, either explicitly or implicitly as a platform’s generic activation / click event;
  • A mechanism is available that allows the user to choose the up-event as an option;
  • Confirmation is provided, which can dismiss activation;
  • Activation is reversible;
  • Down-event activation event is essential and waiting for the up-event would invalidate the activity.

Level AA

Nine new Level AA Success Criteria. If you are validating a site to the most common WCAG level seen in settlement agreements, international laws, and general reference, these nine plus the four new Level A mean a total of fourteen you will need to target.

1.4.10 Zoom content (Level AA)
Content can be zoomed to an equivalent width of 320 CSS pixels without loss of content or functionality, and without requiring scrolling on more than one axis except for parts of the content which require two-dimensional layout for usage or meaning.
1.4.11 Graphics Contrast (Level AA)
The visual presentation of graphical objects that are essential for understanding the content or functionality have a contrast ratio of at least 4.5:1 against the adjacent color(s), except for the following:
Thicker
For graphical objects with a minimum width and height of at least 3 CSS pixels, the graphic has a contrast ratio of at least 3:1.
Sensory
Non-text content that is primarily intended to create a visual sensory experience has no contrast requirement;
Logotypes
Graphics that are part of a logo or brand name have no minimum contrast requirement.
Essential
A particular presentation of the graphical is essential to the information being conveyed.
1.4.12 User Interface Component Contrast (Minimum) (Level AA)
Essential visual identifiers of user interface components have a contrast ratio of at least 4.5:1 against the immediate surrounding color(s), except for the following situations:
Thicker
A contrast ratio of at least 3:1 is required where the minimum width and height are at least 3 CSS pixels, for the essential visual identifier.
Inactive
Disabled or otherwise inactive user interface components
User agent control
The color(s) of the user interface component and any adjacent color(s) are determined by the user agent and are not modified by the author.
1.4.13 Adapting Text (Level AA)
If the technologies being used allow the user agent to adapt style properties of text, then no loss of essential content or functionality occurs by adapting all of the following:
  1. line height (line spacing) to at least 1.5 times the font size
  2. spacing underneath paragraphs to at least 2 times the font size
  3. letter spacing (tracking) to at least 0.12 times the font size
  4. word spacing to at least 0.16 times the font size
1.4.14 Content on Hover or Focus (Level AA)
When content becomes visible when triggered by a user interface component receiving keyboard focus or pointer hover, the following are true, except where the visual presentation of the content is controlled by the user agent and is not modified by the author:
Visible trigger
Either the additional content does not obscure any essential content within the triggering user interface component, or the additional content can be closed or repositioned by the user.
Hover
If the additional content is triggered via pointer hover, then that content remains visible when the pointer is moved over it.
Focus
The additional content remains visible while the triggering user interface component has keyboard focus, unless the user dismisses the additional content.
2.2.6 Interruptions (minimum) (Level AA)
There is an easily available mechanism to postpone and suppress interruptions and changes in content unless they are initiated by the user or involve an emergency.
2.5.1 Target Size (Level AA)
The size of the target is at least 44 by 44 CSS pixels for pointer inputs except when:
Customizable
A mechanism is available to change the size of the target independent of the level of page magnification.
Equivalent
The target is available through an equivalent link or control on the same page that is at least 44 by 44 CSS pixels.
Essential
A particular presentation of target is essential to the information being conveyed.
In-Page
The target is a text link where the destination is on the same page.
Inline
The target is in a block of text.
Grouped
Targets in groups of more than five have at least one dimension that is 44 pixels and the other is at least 22 pixels.
User agent control
The appearance of the target is determined by the user agent and is not modified by the author.
2.6.1 Orientation (Level AA)
Content is not locked to a specific display orientation, and functionality of the content is operable in all display orientations, except where display orientation is essential for use of the content.
3.2.7 Change of Content (Level AA)
Programmatic notification is provided for each change of content that indicates a user action was taken or that conveys information, unless one or more of the following is true:
  • There is a programmatically determined relationship between the new content and the control that triggers it;
  • The user has been advised of the change of content before or as a result of using the control;
  • The change of content is not a result of a user action AND not related to the primary purpose of the page.

Level AAA

Only two Success Criteria (so far) at Level AAA.

1.3.4 Contextual Information (Level AAA)
In content implemented using markup languages, contextual information for controls, symbols, and regions can be programmatically determined using a publicly available vocabulary.
2.5.2 Target Size (no exception) (Level AAA)
The size of the target is at least 44 by 44 CSS pixels for pointer inputs.

New Glossary Entries

In addition to new guidelines and success criteria, the glossary has been updated to reflect some of the terminology used throughout the changes. Below are the new entries.

Accessible name
The name of a user interface element. The value of the accessible name may be derived from a visible (e.g., the visible text on a button) or invisible (e.g., the text alternative that describes an icon) property of the user interface element. A simple use for the accessible name property may be illustrated by an “OK” button. The text “OK” is the accessible name. When the button receives focus, assistive technologies may concatenate the platform’s role description with the accessible name. For example, a screen reader may speak “push-button OK” or “OK button”.
Adapt
Formatting being overridden by the client.
Character key
A single printable Unicode code point, any keyboard character that is printable, i.e. letters of the alphabet including capitals, punctuation, numbers, and symbols. Note that the Space and Enter keys, which return empty spaces rather than characters, are not character keys.
Change of content
Changes made to a web page after it has been delivered to the user agent, whether or not initiated by the user.
Contextual information
information which clarifies the meaning of an object. This includes: object’s purpose, position in a process, relationship to other objects and processes.
CSS pixel
Visual angle of about 0.0213 degrees. A CSS pixel is the canonical unit of measure for all lengths and measurements in CSS. This unit is density-independent, and distinct from actual hardware pixels present in a display. User agents and operating systems should ensure that a CSS pixel is set as closely as possible to the CSS Values and Units Module Level 3 reference pixel [css3-values], which takes into account the physical dimensions of the display and the assumed viewing distance (factors which cannot be determined by content authors).
Display orientation
Portrait or landscape mode of the display. See the CSS Device Adaptation Module Level 1, the “orientation” descriptor [css-device-adapt-1].
Easily available (or easily available mode or setting)
One or more of the following are true:
  • can be set one time with as wide a scope as possible (such as using the standards of the operating system, from ISO 9241-112 [[ISO_9241-112]] or GPII [GPII] when available),
  • has the option to save or change the setting, where available interoperably, but also for the scope of the set of web pages,
  • is reachable from each screen where it may be needed, and the path and the control conforms to all of this document.
Essential
If removed, would fundamentally change the information or functionality of the content, and information and functionality cannot be achieved in another way that would conform. Examples of a particular presentation of content being essential to the information being conveyed:
  • banking site where a check deposit has to be in a certain orientation
  • piano app in landscape mode
  • content for apps and devices that do not support the change of display orientation, such as slide presentations to projectors and televisions
  • virtual reality and augmented reality content in which landscape and portrait display orientations are not generally applicable in binary fashion
Keyboard shortcut
An alternative means of triggering an action by the pressing of one or more keys.
Pointer input
Input device that can target a specific coordinate (or set of coordinates) on a screen, such as a mouse, pen, or touch contact. See also Pointer Events Level 2 pointer definition [pointerevents2].
Primary purpose of the page
If removed, the page would lose its meaning or main reason for existing.
Single pointer activation
One point of contact with the screen (vs. multi-touch). A pointer can be any point of contact on the screen made by a mouse cursor, pen, touch (including multi-touch), or other pointing input device. This model makes it easier to write sites and applications that work well no matter what hardware the user has. For scenarios when device-specific handling is desired, this specification also defines properties for inspecting. Pointer Events (REC) Pointer Events Level 2 (ED).
Style Properties
Properties whose values determine the presentation (e.g. font, color, size, location, padding, volume, synthesized speech prosody) of content elements as they are rendered (e.g. onscreen, via loudspeaker, via braille display) by user agents. Style properties can have several origins:
  • user agent default styles: The default style property values applied in the absence of any author or user styles. Some web content technologies specify a default rendering; others do not.
  • author styles: Style property values that are set by the author as part of the content (e.g. in-line styles, author style sheets).
  • user styles: Style property values that are set by the user (e.g. via user agent interface settings, user style sheets).
Target
Region of the display that will accept a touch action. If a portion of a touch target that does not perform the same action or go to the same page is overlapped by another touch target such that it cannot receive touch actions, then that portion is not considered a touch target for purposes of touch target measurements.
Up-event
The activation of a component when the trigger stimulus is released. On different platforms the “up-event” may be called different things, such as “touchend” or “mouseup”. Example: For touchscreen interaction, the event is triggered when a finger is lifted from the touchscreen at the end of a tap.

Feedback

Comments on the current draft are requested via GitHub by September 13, 2017 (with updates in the publicly visible editor’s draft). If you have something to add or suggest, this is your nearly last chance.

Update: August 25, 2017

One Comment

Reply

Thank you for sharing with a11y community. This is really a heads up and can take preparation for new design. I’m supporting a retail company to make their web fully accessible. Hope this info will help our project.

Md Rahman; . Permalink

Leave a Comment or Response

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>