Updated March 2, 2018 to clarify the genesis of Success Criteria included in this post.
Updated July 28, to correct SC numbers and links.
The Web Content Accessibility Guidelines (WCAG) 2.1 is in the final phase to become a W3C Recommendation and that means the web is about to begin accommodating the cognitive needs of many more people. WCAG 2.1 is the first version to specifically address UI and UX designs some people find too difficult to comprehend or too complex to use.
In particular, eleven of the new Success Criteria will result in making the web more inclusive and adaptable for a broader range of human memory, problem solving, and attention abilities. They also expand the spectrum of human reading, linguistic, verbal, math, and visual comprehension necessary to enjoy a rich, productive experience.
As has been the case since WCAG 1.0, Success Criteria developed for one community of people with disabilities can also benefit people from other communities. Only 4 of the new Success Criteria were born out of the Cognitive and Learning Disabilities Task Force (COGA.) They are 1.3.5, 1.3.6, 2.2.6, and 2.2.7. The remaining Success Criteria discussed below were crafted by the Mobile and the Low Vision task forces, yet they have potential benefits for people with cognitive impairments. Likewise, Success Criterion 1.3.5 from COGA paves the way for new technologies to provide people with low vision who turn off images more than just the alternative text information for comprehending the image’s purpose.
In the Candidate Recommendation dated January 30, 2018, two of these 11 Success Criteria are at Level A and six are at Level AA. For organizations wishing to reach for Level AAA, three additional Success Criteria are covered at the end of this post.
WCAG A/AA/AAA Conformance levels explained
Success Criterion 2.5.1 Pointer Gestures
Web content which interprets pointer gestures must be operable with single-point activation and must not require a complicated or complex path-based gesture. An exception is provided for essential multi-point or path-based gestures. Comprehending or remembering gestures involving the use of more than one point of contact or a particular motion is difficult, and in some cases impossible for a person to do.
Sliders are one type of content where a specific motion is necessary for interaction. Making the same functionality available by tapping anywhere along the slider or by tapping buttons to move the slider would satisfy this Success Criterion. Likewise, a screen that can be unlocked by drawling a pattern among dots in a 3 by 3 grid can also be unlocked by tapping on the dots in the same order or tapping on numbers.
Success Criterion 2.6.1 Motion Actuation
When device or user motion can trigger functionality, the same functionality must also be available via user interface components AND a means to disable the motion trigger must be provided. The intent of this Success Criterion is to avoid relying only on motion for functionality and to avoid accidental or unintentional activation of the functionality.
The motion ability some people have may not allow them to make the necessary motion to trigger the functionality. Likewise, a condition like cerebral palsy can cause uncontrollable motion which should not inadvertently trigger functionality.
Similar to gestures, remembering specific motions or comprehending the association between device or user motion and functionality can be difficult to impossible for people with limited cognitive abilities. Likewise, it can be disconcerting or unsettling when functionality is triggered and the user does not know how it happened.
Two exceptions are provided:
- The motion is used to operate functionality through an accessibility supported interface
- The motion is essential for the function and doing so would invalidate the activity
Success Criterion 1.3.5 Identify Input Purpose
Automatically suggesting responses or populating form fields is one of the newest features provided by some user agents like browsers. This functionality is very helpful for people who have a hard time remembering, transcribing or copying information as well as those prone to making spelling mistakes or misreading labels.
This success criteria requires the author to add an autocomplete attribute to form elements so that user agents know what they do, and then can add appropriate extra support. The value of this attribute contains either a single token with the word “off” or “on”, or an ordered set of space-separated tokens defined in the HTML 5.2 specification.
Tokens define expected user input, like “username”, “shipping street-address”, or “billing street-address”. In one case, the tokens serve a slightly different purpose. The one exception occurs when the input element has a type=hidden attribute. In this case, the tokens provide the meaning of the form element’s value.
This Success Criterion applies when the purpose or meaning of the form element maps to at least one of the tokens and technologies used to provide the content support the autocomplete attribute.
Success Criterion 1.4.10 Reflow
Vertical scrolling is required to see all of the content on most web pages. It is the norm and only problematic in rare cases like bottom-less, infinitely loading pages or when a parallax effect occurs. Horizontal scrolling is uncommon to the point of being considered taboo by some designers. That said, certain types of content, such as a large chart or table, cannot be presented without requiring horizontal scrolling. By itself, horizontal scrolling does not present a major problem, especially if enough cues are provided to indicate more content is available by scrolling horizontally.
A page requiring both vertical and horizontal scrolling when the content is rendered at its original size is extremely rare and difficult for many users to navigate. Difficult becomes impossible for some people with limited vision or cognitive abilities. They can become ‘lost’ within the content, unable to maintain a sense of meaning conveyed by context or unable to remember where specific content is located on the page.
While there are exceptions, this Success Criterion seeks to prevent two-dimensional scrolling when content is enlarged up to 400% of the original size. The abilities some people have require content to be enlarged just to see it well enough to read it or correctly perceive an image. In other cases, content is enlarged to reduce the amount of information displayed down to a level that is not overwhelming or to increase the white space between sentences and words.
- Content with vertical scrolling must reflow in a way that avoids horizontal scrolling when the content is reduced to “a width equivalent to 320 CSS pixels“.
- Content with horizontal scrolling must reflow in a way that avoids vertical scrolling when the content is reduced to “a height equivalent to 256 CSS pixels”.
Any parts of the content where interaction or comprehension requires both horizontal and vertical scrolling is excepted.
Success Criterion 1.4.12 Text Spacing
Text content provided by markup languages where the text style is determined by properties such as font, color, size, padding, etc. falls under this Success Criterion. The style properties may originate from the user agent, author provided styles, or styles set by the user.
On some web pages, people with conditions like dyslexia, dyscalculia or those who have difficulty remaining focused or reading, as well as people with vision difficulties, are more able to read text when spacing changes are made. The intent of this Success Criterion is to prevent inhibiting the opportunity to make specific spacing changes.
When applicable, the content or functionality must experience no loss when any or all of the following changes are made, and no other style changes are required to avoid the loss.
- Line height (line spacing) to at least 1.5 times the font size
- Spacing following paragraphs to at least 2 times the font size
- Letter spacing (tracking) to at least 0.12 times the font size
- Word spacing to at least 0.16 times the font size
An exception is provided for languages and scripts where any or all of these properties are not available for use. In those cases, text conforms when any of the properties which can be used satisfies the applicable requirement listed above.
Success Criterion 1.4.13 Content on Hover or Focus
When hovering or focusing on content triggers the addition or removal of other content,
- A way to reverse the action without moving the pointer or focus location must be provided. This requirement does not apply to input error content, or when the additional content does not obscure or replace existing content.
- The additional content displayed by hovering must remain visible while the pointer is moved over it.
- The additional content must remain visible unless an action causes the hover or focus to be removed, the user takes a specific action to dismiss it, or the content is no longer applicable.
Some people lack the cognitive ability to comprehend or not be disrupted by content that seems to mysteriously appear and disappear when they didn’t expect the change, or do anything to cause the change.
An exception is provided when the user agent controls displaying the additional content and the author has not modified it.
Success Criterion 2.5.4 Concurrent Input Mechanisms
Input modalities provided by a platform cannot be restricted by web content unless:
- It is an essential restriction;
- Security of the content would be jeopardized without the restriction; or,
- It is necessary to preserve user settings.
Consistency and habits are critically important components for some peoples abilities to effectively engage web content. It can be disorienting or impossible to interact with the content when expected input modalities do not work as usual or at all.
Success Criterion 2.6.2 Orientation
Content, rendered on a device where orientation of the device changes the content’s display, cannot be restricted to only display in one orientation. An exception is provided if a specific orientation is essential such as displaying a check or piano keyboard.
Some people need to see information in a single field of vision, like portrait view on a cell phone, to comprehend it, avoid becoming overwhelmed by too much content, or not become distracted.
Success Criterion 1.3.6 Identify Purpose
Does an “X” icon mean close or delete? Does a magnifying glass icon mean search or zoom? Close, delete, search, zoom, download, save, email, open menu and many more are all tasks commonly seen on webpages. Each may be represented by any one of a variety of icons, including new icons like the hamburger menu introduced on smart phones.
User interface components represented by graphics are not an effective means of communication for some people. They are unable to comprehend or recall what it does or are only able to understand a specific set of icons.
The purpose of all user interface controls and regions must also be identified in a programmatically determinable way. The intent of this SC is to allow purpose information to be obtainable in multiple modalities. It is a precursor for technologies designed to accommodate personalization, giving the end user more control over their experience.
Success Criterion 2.2.6 Timeouts
SC 2.2.8 adds a requirement for cases where an inactivity timeout can result in loss of data. To satisfy this SC, the user must be informed about “the estimated length of inactivity that generates the data loss, unless the data is preserved for a minimum of 20 hours of user inactivity.”
SC 2.2.7 Animation from Interactions
Motion animation, the illusion of movement like sliding content onto a screen, content expanding out from a tiny dot on the screen, or parallax scrolling, is a form of animation that can be distracting or trigger a vestibular disorder, resulting in nausea and headaches.
When user interaction can result in motion animation, it must be possible to disable the animation unless it “is essential to the functionality or the information being conveyed.”
It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content.
– source: WCAG 2.1 Conformance Level
1.3.5 Identify Purpose should have been AA and just said “label your icons visibly or offer an easy way to show labels on icons” because this “programmatic association” is going to end up just as autofocus did– while the idea was that some day user agents would allow users to override and disable this annoying “feature”, that hasn’t actually happened after all these years. 1.3.5 is waiting for some software to show up some day that will use this programmatic association to, for example, replace a designer’s icons with the user’s icon-set having meaning personal to the user. But currently, a button with a picture of 3 horizontal lines but with an accessible name properly coded would pass this (a machine could determine its name or label) without helping anyone unless they’re using a screen reader, since all the Guideline says is “programmatically determined.”
I don’t mind this icon-swapping idea but feel more simply requiring that icons be visibly labelled (and Label In Name only touches on this) gets real users today a more immediate help, especially speech users (who are not necessarily helped by programmatic association but are helped by visible labels and so can know what a control is called) but would also help fulfill the cog reasons (a named button gives a better hint at what this control might do if clicked).
Or, if the User Agent requirements were that UAs must visibly show the programmatically-determined label/name, that would work as well, but I don’t know of any browser for example who does this for us.
Please confirm: the new 1.3.5 is AA and Identify Input Purpose and not AAA Identify Purpose
Oops, thanks for the great catch Alan!