How are accessible names calculated?

All interactive web components need an accessible name that describes their purpose, and there are multiple techniques to accomplish this. When a name is properly set, users can access this information using assistive technology.

When multiple naming techniques are present, the World Wide Web Consortium (W3C) outlines a specific process for calculating accessible names that gives precedence to certain techniques over others. In most cases, only one of the names will be communicated to users.

In order from highest to lowest precedence, the most common techniques are:

1. aria-labelledby - this attribute references other text on the page and identifies it as the component’s accessible name.
2. aria-label - this attribute provides a string of text to serve as the component’s accessible name. This text is visually hidden.
3. Associated elements - Specific component types have associated native HTML that provide an accessible name. These elements are visually present unless intentionally hidden. Examples include:
   • Inner text - for buttons, links, and table cells
   • Label elements - for form input fields
   • Legend elements - for fieldsets
   • Caption elements - for tables

It's best to use only one naming technique on a component, and we strongly recommend using associated elements whenever possible. Associated elements use native HTML and are visually present by default, so they will typically be more reliable and consistent for users and easier to maintain for your web team.

The ARIA options should be reserved for interactive component types that don't have an associated HTML element, or for cases where a component's associated element can't provide an adequate accessible name.

For support reviewing accessible names, the Guided Manual WCAG Audit Tool from Accessible Web includes steps for scanning a page and listing its interactive elements and their names.