HTML: aria-labelledby

The aria-labelledby attribute uses the text of one or more elements as an accessible name for another element.

What you will learn

How to connect a visible heading to a region
How multiple ids are combined
How this attribute differs from aria-label and aria-describedby

Dialog or region example

<section aria-labelledby="profile-heading">
  <h2 id="profile-heading">Profile settings</h2>
  <p>Update your account information.</p>
</section>

The section receives its accessible name from the visible heading. Keeping one source of text helps sighted users and assistive-technology users receive the same name.

Use multiple labels

<button aria-labelledby="icon-text action-text">
  <span id="icon-text" aria-hidden="true">↗</span>
  <span id="action-text">Open report</span>
</button>

The ids are separated by spaces. The referenced text is combined to form the accessible name.

Common mistakes

Make sure every referenced id exists and is unique.
Prefer a native label for form controls when it provides the correct relationship.
Use aria-describedby for supplementary help or error text, not for the main name.