It’s almost August 2018—which means that the new version of W3C’s Web Content Accessibility Guidelines, WCAG 2.1 has been released for nearly two months. If you’re reading this blog, you could be asking yourself any number of questions:

  • What is WCAG 2.1?
  • How does WCAG 2.1 differ from WCAG 2.0?
  • What is the reasoning behind WCAG 2.1?

Regardless of your level of understanding of WCAG, this blog post aims to help. WCAG 2.1 expands upon, but does not replace WCAG 2.0, by including 17 new success criteria. One of the biggest, if not most notable, differentiators is that while many WCAG 2.0 criteria could be checked with automated software, most of the WCAG 2.1 criteria require manual testing. These additional criteria are meant to help people with low vision, learning disabilities, and cognitive disabilities. 

Below, we explore the new A and AA criteria and what each one means for your digital presence. (From lowest to highest, the three levels of WCAG conformance are categorized as A, AA, and AAA.)

Don’t Fall Behind on Digital Accessibility: Sign up now and get all the latest news on WCAG 2.1, how new accessibility criteria will be incorporated into the EU’s Web Accessibility Directive, and other important developments in digital accessibility.

Sign up for regular accessibility updates

WCAG 2.1 Success Criteria and What They Actually Mean

1. Orientation (AA) –

Put simply, orientation refers to how you can view and access a website on a mobile device. Websites and other digital applications should support both the landscape and portrait orientations. This will help users with disabilities who have their devices on a stand or mounted a certain way.

A phone and then an arrow toward a laptop, indicating the difference in orientation

2. Identify Input Purpose (AA) –

If you’re familiar with AutoComplete, then this criterion will likely cause you to shout with relief! To reduce the amount of typing required, the goal here is to ensure that—when available—AutoComplete works as expected. The W3C uses the term “programmatically determined,” meaning that software can do the heavy lifting (typing) for users. This includes name, street address, telephone, birthday and other input purposes.

3. Reflow (AA) –

You know those times when you go to visit a website on your mobile device and the text on the page is not fit to screen? When this happens you not only have to scroll vertically, but horizontally, as well. It's a pain! This frustration is common for users with low vision who enlarge the font size of a page to 400% on any device. When designing your website, aim to steer clear of templates or designs that demand horizontal scrolling—users of all physical and cognitive abilities will thank you.

4. Non-text Contrast (AA) –

One of the most complex WCAG success criteria is the one about color contrast. Text against the background must meet either a 3:1 or 4.5:1 ratio, depending on the size and weight of the text. WCAG 2.1 takes this a step further by noting that "user interface components" (such as buttons, form controls, and links) as well as some graphics, have a ratio of 3:1 against the surrounding environment. While some accessibility professionals have long used the WCAG 2.0 color contrast requirement as a guideline for contrast in general, this criterion solidifies a common best practice.

Take the example of an "X" icon used to denote that a modal window can be closed, and now imagine this white icon atop the picture of a cloudless sky. The white icon against a light blue background may not pass this 3:1 ratio, meaning that some low-vision users won't be able to locate it.

When it comes to graphics, complying with this criterion doesn't necessitate that you make every graphic meet the 3:1 ratio, just the parts of graphics needed to understand the content. Think about charts, graphs, icons, and other graphics that—without contrast—would be tough to identify.

Two images: one displays 2.2:1 contrast and one displays 5.7:1 contrast

5. Text Spacing (AA) –

Spacing can make or break how your website content is digested, especially for your visitors with learning disabilities or those for whom English is a second language. WCAG 2.1 aims to make sure that visitors have the option to override paragraph, letter, and word spacing, as well as line height, so they can adjust the text accordingly without losing the functionality of the site.

6. Content on Hover or Focus (AA) –

It's commonplace on the web to display additional information while hovering over graphics. For a user with low vision or a learning disability (including dyslexia), though, this interaction can be distracting and have a negative impact on the user's overall experience. Under WCAG 2.1, the user must be able to close/dismiss and interact with the additional content without it disappearing. Additionally, the content must remain present until the user actively closes the pop-up.

7. Character Key Shortcuts (A) –

If you've used Gmail's single-letter commands to archive, delete, or reply to messages, then you're familiar with single-letter keystrokes. When someone is using dictation software to control their computer (e.g. Dragon Naturally Speaking), imagine the problem if someone were to walk into a user's office and say, "Hi, Sean" while the microphone is active. In Gmail, the first message would be starred, then archived, then a reply-all message would open on the next email, and finally enter the letter "n" in the body of that message.

Under WCAG 2.1, we can avoid this entire scenario because the user would be able to:

  • Turn off single-letter shortcuts
  • Remap the shortcut to use one or more modifier keys (e.g. Control or Alt)
  • Make the keyboard shortcut active only when a component is in focus

8. Pointer Gestures (A) –

Chances are you can recall a time when you had to do some acrobatics or involved motion with your fingers to operate a webpage on your mobile device (I.e., two-finger zoom or pinch). The truth is, an action like this may be impossible for some users, so WCAG 2.1 says that there must be an option for single-finger operation, unless an action such as a two-finger pinch is essential (perhaps in a free-hand drawing app).

A finger pointing on a phone

9. Pointer Cancellation (A) –

The best example for this is on a touch-screen device. By now, we're all familiar with how to scroll a page: place your finger on the screen, and—without removing your finger—drag up or down. Imagine, though, if the touch-screen only recognized your tapping as clicking before you removed your finger. For users with limited dexterity, accidental activation can be easily solved if developers think about this in advance. Pointer cancellation aims to avoid this by requiring that certain events only be triggered when the user removes their pointer [finger, mouse, or keyboard] or easily get back to what he or she hoped to do.

10. Label in Name (A) –

Here is one of the simplest new success criteria. When labels include text or images of text, the name must contain the text that is presented visually. If a link to a search page visually says "search," don't label the button with ALT text that says, "find product". Why? Because when users of dictation software say, "click link search," the software won't be able to recognize that they meant to click on the link that’s labeled "find products". Furthermore, contrary to what many people think, the largest group of screen-reader users are sighted people with learning disabilities who rely upon the screen-reader audio and text on screen to match. Indeed, these multiple streams of information helps those with learning disabilities cognitively understand what they’re seeing. When there is a mis-match, this benefit becomes a point of confusion.

11. Motion Actuation (A) –

Many mobile apps and websites require physical action in addition to touching or clicking, such as shaking or tilting, which could present an obstacle for visitors with various disabilities. With that said, design should allow for the function to be performed with user interface components in replace of any physical action. On an iPad, after entering text, you can shake the phone to undo that typing. In addition, above the iPad keyboard, you’ll find a button that takes the same action and the user can disable the “shake to undo” in settings.

12. Status Messages (AA) –

A status message, like the one that appears when you submit a form or answer a poll, is often so subtle that it can be hard to notice that anything happened if you have low vision or a cognitive processing disorder. Status messages can be programmed to be announced through a user’s assistive technology so that they can be sure that any action they perform is completed.

One mobile phone showing no status message and one showing a status message.


Now that we’ve gone through the new A and AA criteria as presented by the W3C, you might have a better understanding of the direction web accessibility is going in the coming years.