2.5.3 Label in Name (A)

2.5.3 Label in Name (A)

Success Criterion 2.5.3 Label in Name (Level A):

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

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

Intent:

The intent of this criterion is to ensure that the label for a control that a user sees on a page matches the accessible name of that control recognized by assistive technology. If these names do not match, then users who use speech to control their screen may have difficulty activating controls on the screen.

Assistive technologies construct accessible names using an algorithm that adds together various pieces of information about the element. These include the text that appears on the element, any form labels, and any aria-label or aria-labelledby attributes. Most of the time, failures of this success criterion will be paired with a failure of another success criterion, but here are a couple of things to keep in mind:

  1. You should avoid using text in an image, but if you do use text in an image as a button, make sure the alt text matches the image text.
  2. aria-label and aria-labelledby override other information about the element when the assistive technology creates an accessible name. This means that adding an aria-label does not add additional information to the name, it simply replaces the other information. Making sure that the aria-label or aria-labelledby attributes contain what the user sees is important, because those attributes become the entire accessible name.

Who it helps:

  • Users who use speech to interact with their devices, because the accessible name that the AT recognizes will match what the user sees on the screen
  • Users with low vision who use screen readers, because the accessible name that the screen reader reads aloud will match what they see on the screen.

Bad Example: Image of text as button

button with text 'submit'

“Computer! ‘Submit’ the form! Computer! Why aren’t you doing what I said?”
- User who uses speech to control their device.

<img src="submit.png" alt="send">

In this example, the button is an image that says "submit" but has alt-text saying "send." The user controlling their computer through speech cannot submit the form because the button's alt text does not match the visual text, so the accessible name does not match the visual text.