The latest iteration of the Web Content Accessibility Guidelines (WCAG 2.1) includes a new success criterion that should improve the web navigation experience for speech recognition software users.

Success Criterion 2.4.12 Label in Name (Level A)

For user interface components with labels that include text or images of text, the name contains the text presented.

Note: A best practice is to have the text of the label at the start of the name.

Here’s a scenario where this is relevant:

This web page has multiple identical Add to cart buttons. For sighted users who interact physically with their device (e.g. keyboard, mouse, touch), this is fine.

Based on the button locations in the layout, these users can infer which Add to cart button relates to which product.

 

screenshot of online shopping page with Add To Cart buttons, inaccessible to speech recognition software users

 

The simplest version of the Add to cart button could look something like this:

<button type="button"> 
    <span>Add to cart  
        <i class="cartControls-cartIcon"></i> 
    </span> 
</button>

It’s a button and its label is “Add to cart” followed by a cart icon. Its simplicity is beautiful, but it’s not helpful for users who depend on screen readers.

If they pull up a list of buttons (INSERT + CTRL + B in JAWS), they will hear “Add to cart” multiple times, without any product context.

To provide more screen reader context without cluttering up the screen, I’ve usually recommended adding some offscreen content, like this:

<button type="button"> 
    <span> 
        Add  
        <span class="offscreen">Lettuce Iceberg each</span> to cart 
        <i class="cartControls-cartIcon"></i> 
    </span> 
</button>

Now the screen reader button list contains more meaningful labels:

  • Add Lettuce Iceberg each to cart
  • Add Raspberry Fresh 125g punnet to cart
  • Add Palmolive Soap Bar Aloe & Olive 4pk to cart
  • Add Nestle Smarties Sharepack 11pk 140g to cart

It’s much easier to understand which product will be added to the cart when each button is pressed.

However.

The new button labels, as read by screen readers, no longer contain the phrase “Add to cart”. The product name is in the middle of the phrase, since “Add <x> to cart” sounds most natural.

Inserting offscreen content into the visible label is a problem for sighted users of speech recognition software such as Nuance’s Dragon NaturallySpeaking. 

In the layout above, a Dragon user would reasonably expect that saying “Click Add to cart one” should add the first product to their cart.

But since the button’s name in the code is “Add Lettuce Iceberg each to cart”, this instruction will likely fail.

The new WCAG 2.1 success criterion Label in Name (2.4.12) seeks to prevent this failure by directing developers to keep the visible phrase (e.g. “Add to cart”) together in the code. This gives speech recognition software a better chance to match the intended component.

In our example scenario, we have two options to satisfy the new success criterion whilst giving context to screen readers users:

  • Add to cart Lettuce Iceberg each
  • Lettuce Iceberg each Add to cart

I prefer the first option because it says the button action first.

It enables screen reader users to move on quickly if they don’t want to add a product to their cart. 

It also happens to satisfy the best practice of having the visible content (“Add to cart”) at the start of the component name.

The new success criterion also prevents a component from having a visible label that’s entirely different from its name in code (e.g. “Add to cart” vs “Buy Iceberg Lettuce each”).

Again, the intention is to maximise usability for speech recognition users.

With the escalating roll-out and adoption of speech-based interfaces, this addition to WCAG will benefit increasing numbers of users.