How Accessible Name Computation Works

The accessible name computation algorithm is the standardized set of rules web browsers use to determine the text label assigned to an HTML element within the accessibility tree. Assistive technologies, such as screen readers, rely on this accessible name to inform users what an element is and what it does. This article outlines the step-by-step hierarchy browsers follow to calculate an accessible name, from high-priority ARIA attributes down to native HTML semantics and fallback attributes.

1. Hidden Elements and CSS Display Rules

Before calculating a name, the browser determines if the element itself is hidden from the accessibility tree. Elements styled with display: none or visibility: hidden, or marked with aria-hidden="true", are generally ignored by the algorithm unless explicitly referenced by another element through an ID reference.

2. The aria-labelledby Attribute

The highest priority in the computation order is aria-labelledby.

  • If an element includes aria-labelledby, the browser looks up the space-separated list of element IDs specified in its value.
  • The browser extracts the text content of those referenced elements and concatenates them to form the accessible name.
  • aria-labelledby can reference elements that are hidden with display: none or aria-hidden="true", allowing developers to create dedicated, invisible labeling nodes if needed.

3. The aria-label Attribute

If aria-labelledby is absent or resolves to an empty string, the browser checks for the aria-label attribute.

  • The exact string value provided inside aria-label becomes the accessible name.
  • When present, aria-label completely overrides any internal text or native labels the element contains.

4. Native HTML Labeling Semantics

If no ARIA labeling attributes are present, the browser evaluates native HTML markup designed for labeling:

  • Form Controls: Elements like <input>, <select>, and <textarea> derive their name from an associated <label> element mapped via the for and id attributes, or by wrapping the control inside a <label>.
  • Images: An <img> element derives its name from the alt attribute.
  • Tables and Figures: A <table> derives its name from its nested <caption>, and a <figure> derives its name from a nested <figcaption>.
  • Fieldsets: A <fieldset> derives its name from its child <legend>.

5. Name from Subtree Content

Certain elements allow their accessible name to be derived directly from their child nodes (known as "name from contents").

  • This rule applies to elements such as <a>, <button>, <summary>, and headings (<h1>–<h6>).
  • The browser traverses the DOM subtree of the element and concatenates visible text nodes.
  • If a child element inside the subtree has its own accessible name (such as an embedded image with an alt attribute), that name is factored into the parent element’s overall accessible name.

6. Fallback Attributes

When none of the previous criteria yield a valid name, the browser falls back to secondary attributes:

  • The title Attribute: The browser uses the element's title attribute value.
  • The placeholder Attribute: For form inputs, the browser may use the placeholder text as a last resort, though relying on placeholders for accessible names is discouraged because it provides a suboptimal user experience.

If all steps in the algorithm fail to locate a valid source of text, the element is left without an accessible name, rendering it an unlabelled control to screen readers.