Even more accessible! What WCAG 2.1 means for designers

The W3C published its updated accessibility standard (WCAG 2.1) in June. What does it mean for designers? See how the new criteria affect layout and interaction design, including a shoutout to touchscreen devices (finally!)

Allison Ravenhall

WCAG is the Web Content Accessibility Guidelines. We’ve been working to 2.0 since 2008 and in June 2018 we got …. a point release. Yay! WCAG 2.1 adds 17 new success criteria over 2.0. It’s still unreadable, we’ve just added more…

Allison will run through ten of these new checkpoints.

“Define the data types of the form fields you use to collect personal information”
This means we need to have an autocomplete attribute, so the right stuff gets filled in. It’s not just convenient for all of us, it’s a massive win for people with limited mobility.

“Design responsive layouts”
…surely you’re already doing this?! But for accessibility your design should cope when a user zooms in by 400%. That’s a pretty big challenge, particularly when you realise you want to avoid scrollbars.

“Make keyboard shortcuts configurable”
Lots of apps set up their own shortcuts, but this seriously impacts people who use assistive technology. Let people switch them off.

“Define simple gestures”
This is the first version of WCAG to address touch devices. People with dexterity limits have trouble with complex gestures, including things people often take for granted like pinch-zoom. This is why Google Maps still has a +/- to go along with the touch gestures.

“Start element labels with contextual labels”
Basically make sure controls are differentiated. This needs to be a single piece of content. There are some odd tricks to the way this works so be sure to test across different tools like screenreaders and voice controls.

“Provide alternatives to motion functions”
As we get more motion-heavy interactions (think Nintendo Switch) this becomes more important. Zelda doesn’t give you an alternative to tilting the device to solve a puzzle; Mario Kart does give alternative controls! Be like Mario. The only exception is when motion is literally the only thing the interaction does, like a dance game.

“Don’t make users read sideways (orientation)”
Respect the orientation settings of an application. Some people mount devices in a stand, which means they can’t easily switch orientation. People have set orientation for a reason!

We already have a requirement for 3:1 contrast for headings and 4.5:1 for text. New:
element outlines, like form inputs and buttons 3:1
icons and graphics 3:1
state styles like hover, focus, error, selected 3:1
Disabled state is an exception – they can be pale, because making them have higher contrast makes them look interactive..!

“Make interactive things big”
44×44 css pixels is the minimum size for something you interact with. Make touch targets big enough to hit.
Exceptions: if there’s an equivalent that’s big (ie. it’s a duplicate control), inline line text, browser-controlled elements, or if the size of the thing is critical to work.

“Tell users in advance about timeouts”
Many people can’t fill out forms fast enough for your timeout. This includes people with anxiety triggered by time limits and deadlines. Don’t spring it on them with 30 seconds to go. Tell people as early as possible that a time limit exists.

That’s ten… you’ve learned over half of the new requirements!