June Accessibility (A11Y) Talks - What's New with WCAG 2.1 | Hook 42 SF Bay Area Drupal Experts and WordPress Experts

Friday, July 13, 2018

Hook42 Team

The June A11y Talk welcomed back Drupal Core Accessibility Maintainer, Andrew Macpherson. The “What's New with WCAG 2.1” talk discussed the new guidelines that were released in early June.

Web Content Accessibility Guidelines (WCAG 2.1) extends WCAG 2.0 and is intended as an interim until WCAG 3.0 is released. The new guidelines were needed due to advancements in technology and to fix some gaps and shortcomings in the earlier guidelines. Some of the new guidelines cover touch/mobile devices, speech control, and cognitive disability support.

The new extensions are organized in the same manner with priority levels A, AA, AAA. The numbering protocols remain the same: Principles > Guidelines > Success Criteria. There are 17 new success criteria: Level A - 5 new criteria, Level AA - 7 new criteria, and Level AAA - 5 new criteria. There were more proposed, but were not included because they were difficult to describe how to test. It is important that the success criteria be human testable so audits can be performed. Some guidelines changed numbering, priority levels, or were moved to another group.

There are documents in place to help people understand the new guidelines. They provide successful techniques along with known failures.

What's New with WCAG 2.1

New Success Criteria at Level A

Guideline 1.4.11 - Non-text Contrast
Icons, buttons, “focus rings”, and other state indicators now have minimum contrast.

Guideline 2.1.4 - Character Key Shortcuts
Speech control and dictation can trigger character key shortcuts accidentally. The new guideline requires modifier keys, not only single characters.
Example: Instead of just the key K, the command would be ctrl + K. Providing options to re-map or turn off shortcuts eliminates accidental triggers as well.

Guideline 2.5 - Input Modalities
This is a new guideline surrounding different input devices. Icons, buttons, “focus rings”, and other state indicators now have minimum contrast.

Guideline 2.5.1 Pointer Gestures
Multi Touch screens and trackpads are now common and many have the ability to be controlled by gestures. Not all people can gesture. We can’t assume people can move their phone. The new guideline defines that multi-point or path-based gestures must also work with a single pointer. Websites must be able to work with only a mouse

Guideline 2.5.2 Pointer Cancellation
When buttons are close together, it can be easy to push the wrong one. To avoid accidental activation when a mouse button is pressed, a website can avoid using JavaScript “down” events. By avoiding this code and using “up” events, a user that has pressed down on the wrong button can now move the mouse or pointer to the correct button and release it “up”.
Example: mousedown and touchstart.

Guideline 2.5.3 Label in Name
This new guideline helps speech control users activate controls. Mismatching the accessible name with what is visually displayed should be avoided. If a button reads “Sign In”, the label should read the same.
Example: <button aria-label=”Log in”>Sign In <button>, should read <button aria-label=”Sign In”>Sign In <button>

Guideline 2.5.4 Motion Actuation
Hand held devices, like Smartphones, have many sensors in them so they can detect motion which enables specific events to occur.

Success Criteria Links for Level AA and AAA

Because of time limitations, Andrew focused on discussing the new success criteria at the A level. Here are the sections that got extended at the next levels.