2.5.3

2.5.3 Label in Name

WCAG says:

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

When this is applicable

If there are interactive elements that have textual labels.

Check text in accessible name

Identify all interactive elements that either label themselves or have a label. Labels do not need to be a label element or be programmatically connected to the interactive element, it can be just the text adjacent to the interactive element. They can be a placeholder if that is the only visible label.

Check:

• labels have an accessible name that includes the exact same text as the visible label - it can include more, but it must be in the same order
• the label closest to the element, if there are multiple labels

If there is no accessible name, it can be argued that the visible label does not match "nothing" and so would fail. It can also be argued that if there is no accessible name there is nothing to compare the label to, so this would not apply. Having no accessible name could fail under both 4.1.2 Name, Role, Value and 2.5.3 Label in Name, but it might be more important to fix the missing accessible name under 4.1.2, and then look at 2.5.3.

Exceptions

• labels that don't include text or images of text, like icons
• if there isn't a visible label
• if an image of text is of no proper text but a symbol standing in for a functionality (like a "B" button in an editor that stands for "bold")
• non-essential punctuation or capitalisation in the visible label

Best practice

If the accessible name is more than the link text, the text before it should be at the start of the name.

Don't use placeholders.

Mobile app testing

For user interface components with text, use a screen reader to compare the label that it announces with the visual label.