ARIA-labelledby

`aria-labelledby` gives an element an accessible name by referencing the `id` of one or more other elements whose text provides the label. It is especially useful when visible text already exists and should be reused by assistive technologies.

`aria-labelledby` is an ARIA attribute whose value is a space-separated list of element IDs. The referenced elements contribute their text to the accessible name of the element carrying the attribute.

A common use is labeling a dialog, region, or form control with an existing visible heading or label. For example, a dialog can reference its visible `<h2>` instead of duplicating the heading text in an ARIA attribute.

The referenced IDs must identify elements in the document. Multiple IDs can be supplied; their referenced text is combined in the specified order. Because the relationship depends on IDs, changing or removing a referenced element can break the accessible name.

Prefer native HTML labeling mechanisms when they directly express the relationship, such as `<label for="...">` for form controls. Use `aria-labelledby` when an accessible name needs to be derived from existing text or when the relevant ARIA naming pattern calls for it.

Key points

• `aria-labelledby` references one or more element IDs.
• The referenced elements provide text used for the accessible name.
• Multiple IDs are separated by spaces and processed in order.
• Referenced IDs must exist for the intended naming relationship to work.
• Prefer native HTML labeling mechanisms when they are appropriate.

Interview questions

What does `aria-labelledby` do?

It provides an accessible name by referencing another element, or several elements, by their IDs. The referenced elements' text contributes to the name exposed to assistive technology. This lets visible text serve as the accessible label without duplicating it.

When would you use `aria-labelledby` instead of `aria-label`?

Use `aria-labelledby` when suitable labeling text already exists in the page and can be referenced by ID. This keeps the accessible name tied to the visible text rather than maintaining a separate string. `aria-label` is useful when there is no suitable visible element to reference.

How do you label a dialog with `aria-labelledby`?

Give the dialog's heading an `id`, then set the dialog's `aria-labelledby` value to that ID. For example, a dialog can use `aria-labelledby="dialog-title"` while its heading has `id="dialog-title"`. The heading text then supplies the dialog's accessible name.

Why is native HTML labeling generally preferred for form controls?

Native HTML provides semantics and browser accessibility behavior without requiring an ARIA relationship. For a standard form control, a `<label>` associated with the control is usually the appropriate mechanism. ARIA should complement native semantics rather than replace them unnecessarily.