The visible label must be included in the accessible name (mostly applies to images and where labels are over-ridden)

Design Notes

Don’t unnecessarily override visible labels using aria-label

Ensure the visible label and underlying accessible name for interactive controls is consistent. This consistency helps ensure users of voice recognition software can operate interfaces successfully and avoids issues with screen reader users being presented with a label that does not make sense.

It is not necessary to provide aria labels which duplicate the text visible in an interface. If there is a visible text label it is rarely necessary to provide an aria-label with different text.

Adding redundant aria labels increases the likelihood of mis-matches over time as content editors may change visible text labels but may forget, or not be able, to update aria labels.

Developer Notes

Use aria-label appropriately - ensure visible labels are correctly exposed to assistive technologies

Ensure user interface components with visible labels also have an accessible name which is accurate and matches what is presented visually.

This helps speech input users who interact with components on the page by speaking the visible text labels.

Only use aria label where it is absolutely required. If there is a visible text label for a control, an aria label is likely to be redundant.

Chrome's accessibility inspector (the Accessibility pane within the Elements Panel) can be used to inspect the accessible name of an element.

Information and tools

• ARIA Labels and Relationships
• Tool: View an element's computed accessibility properties

Testing Notes

The visible label must be included in the accessible name

Do not override visible labels with aria-label/labelledby

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

Steps to check

• MacOS has accessibility settings to highlight the accessible name using ‘hover’ in Safari, look for ‘hover text’
  • This can also be turned on at a system level via MacOS Catalina Accessibility Settings > Zoom > Enable Hover Text
• If familiar with Chrome Developer Tools (Firefox will be similar), inspect and element and review 'Name' details in the 'Computer Properties' section of the Accessibility Tab
• Use a screen reader to check that the visible name and spoken name match

Impact range: Medium

Test type: Manual

Information: Use Hover Text on Mac

Tool: View an element's computed accessibility properties

WCAG Reference: Understanding Success Criterion 2.5.3 Label in Name