2.5.3: Label in Name

Button labelled search location with a matching accessible name search location

About IA Labs Icon

2.5.3: Label in Name is a WCAG 2.1, Level A success criterion and states that for user interface components with labels that include text or images of text, the accessible name must contain the text that is presented visually.

In simpler language, the intent of this success criterion is to ensure that the visual text label (e.g., in links, menus, buttons, and input fields) matches or is included in the accessible name (programmatically given name).

Digital Inclusion Icon

How do labels in names help users?

When the name of a label matches its visual presentation, speech-input users (or people who use speech recognition applications) can navigate by speaking the visible text labels of components that appear on the screen. Sighted users who use text-to-speech (such as screen readers) will also have a better experience if the text they hear matches the text they see on the screen.

For example, if a text label is called ‘Submit’ a speech-input user can provide the command ‘Move to Submit’ for the speech recognition software. This action won’t take place if the submit button has a different accessible name, for example if it is coded as ‘Send’.

Website selling lemons, kiwis and grapefruits. Each product has a button labelled add

If more descriptive details are needed in the accessible name, they can be added, but the text in the visible label should be at the start of the programmatic name. For example, imagine a website that sells products, and all the products have the same visible label and accessible name ‘Add’.

When a user says ‘Add’ to add a specific item to their cart, the software won’t know which item to add, and no action will take place. Because more details are needed, a non-visible label can be added with the required details. Now, the software expects the user to say ‘Add lemons 4 pack’ for the action to take place. The visible label would be ‘Add’ and the accessible name ‘Add lemons 4 pack’. A more accessible way would be if the visible label matches the accessible name, and both read ‘Add lemons 4 pack’.

IA Labs Services Icon

How can IA Labs help?

As part of our consultations, accessibility audits, and training sessions, we can explain all the contextual nuances that would apply to the WCAG 2.1 Success Criterion 2.5.3 Label in Name. If you have any questions or need help with any digital accessibility issue, please don’t hesitate to contact IA Labs.