aria-label と aria-labelledby

When native labeling is not enough, you have two ARIA tools: aria-label for an inline string, and aria-labelledby to point at existing text.

Use aria-label when there is no visible text to borrow. You type the spoken name right on the element itself.

Use aria-labelledby when visible text on the page can serve as the name. Its value is the id of that element, not a string.

Reach for aria-labelledby first. Reusing on-screen text keeps the spoken name and the visible name in sync automatically.

Give aria-labelledby several ids separated by spaces, and the browser joins their text in that order into one name.

If both are present, aria-labelledby wins. The browser ignores aria-label entirely, so never expect them to merge.

With aria-labelledby an element may reference its own id, which is handy for naming a region by its visible heading text.

An aria-label never appears on screen. It changes only what assistive tech announces, so sighted users see no difference.

An aria-label is plain text that page translators often skip, while labelledby reuses visible content that does get translated.

An aria-labelledby id has to match a real element id. A typo silently leaves the element with no computed name at all.

Ask where the name lives. If it is already on screen, use aria-labelledby; if it exists only for assistive tech, use aria-label.

A section already shows an h2 heading. How should you name the section?

You learned to use aria-labelledby for existing visible text and aria-label for invisible inline names, never expecting them to combine. 🎯