You are currently viewing Success Criterion 2.5.3 Label in Name

Success Criterion 2.5.3 Label in Name

WCAG Principle: Operable

Guideline 2.5: Input Modalities (Make it easier for users to operate functionality through various inputs beyond keyboard)

Conformance Level: A (Minimal Requirement)

What is Success Criterion 2.5.3?

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

Some users depend more on programmatic names than on the text displayed on controls and components. Users using assistive technology such as website screen readers will find this particularly useful since the control name matches the text displayed on it.

How does it make your website accessible?

People who rely on screen readers need to tell their technology the accessible name of the component so the software knows which one to activate. If the accessible name does not match the visible label, the user will not know what correct name to say.

Who benefits from meaningful label texts?

  • Speech-input users.
  • Text-to-speech users.

How to Meet Success Criterion 2.5.3

Common mistakes:

  • Accessible name contains the visible label text, but the words of the visible label are not in the same order as they are in the visible label text. 
  • Accessible name contains the visible label text, but one or more other words are interspersed in the label.

How to fix mistakes:

  • Include the text of the visible label as part of the accessible name.
  • Match the accessible name to the visible label.
  • Position labels to maximize predictability of relationships.

Helpful Tips For Developers:

  • Place the text of the label at the start of the name.
  • If an icon has no accompanying text, consider using its hover text as its accessible name.

How To Test If You’ve Met Compliance:

For all controls with a visible label (e.g., link text, button text, programmatically linked label, images in links with text), check that:

  1. The accessible name is the same as the visible label.
  2. The accessible name contains a match for the string of the visible label
    • If checks #1 and #2 are true, you’ve passed this success criterion.

Bad and Good Examples (Pictures and Developer Code)

Good and bad examples of where text label of images match/do not match their accessible names.
Shopping Cart image from Pexels.com

bad example of Code Snippet

<button onclick="alert(Sneakers added to cart');" aria-label="Buy">Buy</button>

Here, if a user agent says “Buy” to add an item to their cart, the software won’t know which item to add and no interaction will take place.

good example of Code Snippet

<button onclick="alert(Sneakers added to cart');" aria-label="Buy">Buy</button>

Every button’s label is unique and matches the accessible name. All user agents would know to say “Buy Sneakers” aloud, so the software can activate the correct button.

Frequently Asked Questions

What is aria-label?

aria-label is an attribute that allows you to place a descriptive text label on an object, such as a link, when there are no elements visible on the page that describe the object. It is designed to help assistive technology (such as screen readers) attach a label to an otherwise anonymous HTML element.

When should I use aria-label?

You should only use an aria-label attribute when an element has a visual indication (such as a button) but still require an alternative for assistive technology users who cannot access it.

What is the difference between alt text and aria-label?

Alt texts are short descriptions of images on the web page which a screen reading software reads out to the user. An aria-label attribute is also a short description read out by screen readers, but it is applied on non-images that need to be accessible to the user such as buttons, list boxes, scroll bars, etc. 

What is the difference between label and aria-label?

The native HTML <label> attribute is used to specify a label for options or option groups within a pull-down menu. An an aria-label attribute is used to create an accessible name for an interactive element that doesn’t have a visible text label. 

Ready To Become
Compliant?

Leave a Reply