July 17 2018

What Do WCAG 2.1 Guidelines Mean For Your Website?

wcag 2.1 guidelinesThese days, most websites attempt to be WCAG ADA Conformant, generally against,
Level AA guidelines. And, as of June 2018, WCAG version 2.1 was released. Version 2.1 is now the base standard to abide by when upgrading or maintaining your business web presence, so it’s important that website owners and managers understand the latest guidelines that version 2.1 includes.
It is important to note that, while version 2.1 brings some new additions, nothing from version 2.0 has been removed. The new guidelines either add clarity to existing guidelines or bring new concepts to the front.

New Guidelines in Version 2.1 – Level A

Though most websites target level AA conformance, some are focused on meeting level A standards. Changes to WCAG level A conformance based on version 2.1 are outlined below:

  • Character Key Shortcuts: If keyboard shortcuts are used on a site, one of the following three must be true:

    • The keyboard shortcut can be turned off

    • The shortcuts can be remapped

    • The keyboard shortcut for a user interface component is only active when it has focus. (Read more on the official guideline page.) 

  • Pointer Gestures: Even if complex gestures exist on a website, the site must also allow for operation with single click or touch. An example is that carousels with sliders cannot only be navigated with swiping but also with forward and backward buttons for single-point activation. (Read more on the official guideline page.) 

  • Pointer Cancellation: Touching the screen or depressing the mouse button (a down-event like “touchstart or “mousedown) must not initiate an action, releasing it (or moving hand from screen "touchend" or finger from mouse "mouseup") should activate the desired action. Further, including a way to cancel the activation of the touch or press is crucial. This can be achieved by moving a finger or mouse cursor away from the target. (Read more on the official guideline page.) 

  • Label in Name: This is specifically for users who use speech input, but also has further implications for helping with accessibility. If a label can be seen, the user will state that label to navigate, but if the programmatic label is different, the speech input could fail. Therefore, the programmatic name of an element must contain the visible text, ideally at the beginning. For example, if a button has visible text of "Read More," the programmatic label should start with that text but add more descriptive text after, such as, "Read more about home equity loans." (Explore further on the official guideline page.)

  • Motion Actuation: Officially: “The intent of this success criterion is to ensure that functions that are triggered by moving a device (for example, shaking or tilting) or by gesturing towards the device (so that sensors like a camera can pick up and interpret the gesturing), can also be operated by more conventional user interface components.” What does this mean in plain speak? Some users with disabilities are not able to operate these device sensors (either not at all, or not precisely enough) because the device is on a fixed mount (perhaps on a wheelchair) or due to motor impairments. Functionality must be implemented in a way that other or additional means of activation are available. (Read more on the official guideline page.) 

New Guidelines in Version 2.1 – Level AA

WCAG level AA conformance is what most sites target, so explore the version 2.1 guidelines that will impact your website:

  • Orientation: Content cannot be restricted to be viewed in only one orientation - landscape or portrait. Exceptions are provided for applications like a bank check, or if content is designed to be specifically displayed on a projector/television. This guideline is to help users with a fixed device - perhaps mounted on a wheelchair - and those with visual impairments who need to manipulate the screen/content in a way that works best. (Read more on the official guideline page.) 

  • Identify Input Purpose: Mostly regarding form fields, assistive technologies need more information about form fields and need it to be uniform so that it can be interpreted consistently. The W3C has provided the list of metadata terms that must be included in the code to become conformant. (Read more on the official guideline page.) 

  • Reflow: When text is enlarged, it must be able to be read in a single column. This can get complicated quickly, but for most sites developers need to ensure a desktop browser can scale up to 400%. In other words, the content must "reflow" so that it is readable on the screen without having to scroll horizontally to see it. (Read more on the official guideline page.)

  • Non-Text Contrast: Active controls, links and or buttons must now have a 3:1 color contrast ratio relative to the background to conform with WCAG 2.1. Previously, sites were only required to have color contrast of 3:1 on controls before focus was applied. What does this mean for your site? On hover, a control, link or button could fall out of conformance if the color ratio isn’t 3:1. However, this additional guideline mandates that contrast ratio minimums be applied no matter the state. (Read more on the official guideline page.) 

  • Text Spacing: End users must be able to override text spacing. No loss of content or functionality is acceptable if the end-user chooses to adjust:

    • Line height (spacing)

    • Spacing following paragraphs

    • Letter spacing (tracking), and/or

    • Word spacing

Beside not limiting the end-user's ability to change these text settings, containers must be flexible to expand and not allow text to be cut off or be otherwise inaccessible when spacing is increased.
It is interesting to note that the guidelines have included a section on “User Responsibility”, meaning that if the design changes based on the text spacing, as long as the text is still legible and accessible, the user owns that.  (Read more on the official guideline page.) 

  • Content on Hover or Focus: If content becomes visible on pointer hover or keyboard focus, the following must be true:

  1. Dismissable - one must be able to dismiss the content without moving the pointer hover or keyboard focus.

  2. Hoverable - the additional popup content must be hoverable in addition to the content that enabled the hover.

  3. Persistent - the content must remain visible until hover or focus is removed, the user dismisses it, or the information is no longer valid.

This does NOT apply to modal dialogues. (Read more on the official guideline page.) 

  • Status Messages: When the content of a page changes without the entire page reloading, the user of a screen reader has no way to know something changed, so a status message must be included with the updated content. The simplest example is the “Loading GIF.” If the end user does something that takes time, the loading GIF will be shown to demonstrate that a server is working. Someone using a screen reader deserves the same information. Status messages are also used to alert of “x results returned” and for the status of submitted forms. Assistive technologies need the ability to communicate those messages in real time and with focus assigned. (Read more on the official guideline page.) 

‚ÄčEmbracing the WCAG 2.1 guidelines

It is important to remember that these guidelines are being outlined to help make the web, which is so pervasive in our current everyday lives, accessible for all. These new protocols focus on three major user audiences: Users with Cognitive or Learning Disabilities, Users with Low Vision, and Users with Disabilities on Mobile Devices. The WCAG governing body has also tried to plan for the future as much as it is able with technology changing so fast. These changes may take time and resources to implement but can ensure your ability as a business to speak to all customers.

As many of you reading this article may be well aware, not adhering to the WCAG recommendations can also have legal ramifications. The good news is that if you have already made your site conformant to at least the version 2.0 standards, you have some time to make site updates to adhere to version 2.1 standards. While you are working on upgrading your site, having an accessibility page outlining where you are in the ADA compliance process may be able to cover you and explain to visitors where you are in the process. Whether you are not in conformance currently, but in process, version 2.0 conformant, or fully conformant up to version 2.1, this content can be crucial in showing your intent.
Need help crafting that language, or understanding any of the points outlined above in more depth? Any of our Certified Professional in Accessibility Core Competencies (CPACC) team members would be happy to speak further.

  • Legal Watch
  • Regs & Legislation
  • Website Compliance

posted by
Dan Seagull
Dan Seagull
Sr. QA & Certified Accessibility Analyst

ZAG Interactive is a full-service digital agency in Glastonbury, CT, offering website design, development, marketing and digital strategy to clients nationwide. See current job openings.
Related Article
Comparing Website ADA Levels