Accessible Names (AccName)

An accessible name is the label assistive technologies use to identify an element, especially interactive controls and semantic widgets. It is computed from sources such as visible text, associated labels, and certain ARIA attributes according to the accessible-name algorithm.

Assistive technologies need a programmatic way to identify controls such as buttons, links, inputs, and menu items. The accessible name provides that identifying label, while the accessible description can provide additional information that is not the primary label.

For native HTML, the browser can derive an accessible name from appropriate semantics. For example, a `<button>Save</button>` gets its name from its text, while an `<input>` can get its name from an associated `<label>`. This is one reason semantic HTML is generally preferable to recreating controls with generic elements.

ARIA can supply or modify an accessible name in specific circumstances. Common mechanisms include `aria-label`, `aria-labelledby`, and native labeling mechanisms. `aria-labelledby` references another element's text and is often useful when the desired label already exists visibly in the page.

The accessible name is not necessarily the same as visible text, an HTML `title` attribute, or an element's DOM `id`. It is a computed accessibility property, and the exact result depends on the element's role and the naming rules that apply to that role.

Key points

• Accessible names identify elements to assistive technologies.
• Prefer native HTML labeling and semantic elements when they provide the needed name.
• `aria-label` supplies a label directly; `aria-labelledby` derives one from referenced content.
• An accessible name is different from an accessible description.
• Do not assume every element can or should receive an ARIA name.

Interview questions

What is an accessible name?

An accessible name is the programmatic label exposed to assistive technologies for an element. It lets a user identify controls such as buttons, links, and form fields. The name can come from native HTML semantics or appropriate ARIA naming mechanisms. It is separate from the element's accessible description.

How would you make an icon-only button accessible?

Give the button a meaningful accessible name that describes its action. If there is no visible text, `aria-label` can provide that name, such as `aria-label="Close dialog"`. If suitable visible text already exists elsewhere, `aria-labelledby` can reference it instead. The button should remain a native `<button>` rather than being recreated with a generic element.

What is the difference between `aria-label` and `aria-labelledby`?

`aria-label` provides the accessible naming text directly on the element. `aria-labelledby` points to other element IDs whose text is used to construct the accessible name. Referencing existing visible text can help keep the accessibility label synchronized with what sighted users see. Neither should be added indiscriminately when native HTML already supplies the appropriate name.

Why should developers prefer native HTML over ARIA for naming controls?

Native HTML elements provide built-in semantics and established accessibility behavior. A native `<button>` or labeled `<input>` therefore requires less custom accessibility logic than a generic element with an ARIA role and attributes. ARIA can fill gaps or provide appropriate naming when native mechanisms are insufficient. It does not automatically make an incorrectly implemented widget equivalent to a native control.

How would you debug a missing accessible name?

First identify the element's computed role and inspect its computed accessible name with browser accessibility tooling or a screen reader. Then check the applicable native naming mechanism, such as button text or a form label, followed by relevant ARIA naming attributes. Verify that referenced IDs exist and that the resulting text actually describes the control. Finally, test the result with assistive technology rather than relying solely on the DOM source.