WCAG 2.1 Is Published

Ten years after 2.0

The Web Content Accessibility Guidelines, the standard most accessibility rules point to, were updated today for the first time since December 2008.

WCAG 2.0 was written before most people browsed on a phone. Version 2.1, now a formal recommendation of the W3C, the body that sets web standards, catches up.

It does not replace 2.0. Every requirement in 2.0 is still there, unchanged, and seventeen new ones have been added.

Twelve of those are at levels A and AA, the levels most rules and contracts ask for. And because nothing was removed, a site that meets 2.1 at a level also meets 2.0 at that level.

What is new at levels A and AA

• Reflow: pages zoomed to four times their size should not need sideways scrolling.
• Text spacing: nothing breaks when a reader widens line and letter spacing.
• Orientation: pages work whichever way the phone is held.
• Non-text contrast: buttons, field borders and icons must stand out clearly.
• Input purpose: form fields say what they collect, so browsers can fill them.
• Hover content: pop-ups that appear on hover can be dismissed and read.
• Status messages: confirmations are announced without moving the reader's place.

The fifth is the cheapest to fix. Labelling the name, email, phone and address fields properly is a small change to the form's code, and it lets a phone fill them in for anybody.

Phones and touch

Several of the new level A requirements deal with how people use touch screens.

Anything done with a swipe, a pinch or a path traced with a finger needs a simple alternative, such as a button, for people who cannot make the gesture.

A carousel that moves only when swiped fails; previous and next buttons fix it.

Actions should happen when a finger lifts rather than when it lands, so an accidental touch can be slid away and cancelled.

Features triggered by shaking or tilting the device need another way in, and a way to switch the motion off.

Low vision

People with low vision often zoom a long way in, or set their own spacing and colours. The new requirements make sure the page survives that.

At high zoom, a well-built responsive site already falls back to its phone layout, which is what reflow asks for. Sites built to one fixed width do not.

Text spacing is the subtle one: boxes sized to fit their text exactly overflow or cut words off when a reader increases the spacing.

Faint grey field borders and pale icons on white are the common failures of the new contrast requirement. Text contrast was already covered by 2.0; this extends it to controls and meaningful graphics.

Speech, memory and attention

People who control a computer by voice say the words they see on a button. A new requirement says the button's name in the code must contain its visible label.

Form fields that identify their purpose help people with memory difficulties as well as phone users, since a browser can fill them in from saved details.

Status messages matter most to screen reader users: a line saying an item was added to the order is read out without the reader losing their place.

The optional AAA level adds more, including larger touch targets, warnings about time limits, and a way to switch off animation triggered by interaction, such as scrolling.

A worked example

A juice bar in New Westminster takes orders for weekly home delivery through a single form: the customer's details, the delivery address, a start date and the juices chosen.

Checked against the new AA requirements, the form had three problems.

None of the fields was labelled for autofill, so phones offered nothing, and every customer typed a name, an address and a phone number with their thumbs.

The field borders were a pale grey that almost vanished in daylight, and a delivery note that appeared on hover disappeared as the pointer moved onto it.

Its web company added the autofill labels, darkened the borders and made the note stay put until dismissed. Most of the work took an afternoon.

What it means for the rules

Rules that cite WCAG 2.0 do not change today. Ontario's accessibility law, for example, still requires private and non-profit organisations employing fifty or more people in the province to meet 2.0 AA, with some exceptions, by January 1, 2021.

Because 2.1 includes all of 2.0, a site built to 2.1 AA satisfies rules written around 2.0 as well.

For anything built from now on, 2.1 is the current standard, so it is the sensible target.

What a small business site should do

A site being built or rebuilt this year should be specified to WCAG 2.1 AA, in writing, and tested against it before launch.

An existing site does not need rebuilding for 2.1. Most of the new AA requirements can be checked in an hour and fixed in small pieces at the next round of updates.

Start with the forms, because several of the new requirements meet there, and a failure on a form costs the business an order or an enquiry directly.

Quick checks

Zoom a desktop browser in until the page is four times its normal size, and read a page. Nothing should run off the right-hand edge.

Fill in your own forms on a phone, and see whether it offers your saved details.

Look at the form fields and buttons on a laptop in daylight. If their edges are hard to see, so is the form.

Turn the phone sideways on each main page, and hover over anything that pops up to check you can move onto it and read it.

The counter-case

None of this makes an existing, well-built site suddenly inaccessible.

Much of 2.1 describes what good responsive design already does, and the AAA items are optional for almost everybody.

A business with a simple, current site may find it already meets most of the new requirements, and that a few form fixes cover the rest.

Use 2.1 AA as the target for new work and the checklist for the next update, rather than as a reason to start again.

This month

1. Zoom your site to four times normal size.
2. Fill in each form on a phone.
3. Check field borders and icons for contrast.
4. Label form fields for autofill.
5. Test pop-ups that appear on hover.
6. Turn the phone sideways on key pages.
7. Write 2.1 AA into any new brief.

Step four is the quickest change with the widest benefit, since every customer filling in a form on a phone gains from it, not only people using assistive technology.

The older rules on flashing and movement, which 2.1 keeps, are covered in moving ads and flashing banners.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.