Accessible name

The string assistive tech announces for a control, computed by the browser from label, text, alt, or ARIA.

what the screen reader calls itthe button's real nameaccessible labelcomputed namethe name in the accessibility treeacessible namewhat VoiceOver reads out for a buttonwhy does it just say 'button'

See it

Live demo coming soon

What it is

The accessible name is the string assistive tech says out loud when focus lands on a control. You do not set it directly: the browser runs the accessible name computation and works one out. For most controls the order runs aria-labelledby first, then aria-label, then the element's native source (a label element, alt text, the button's own text, a fieldset legend), with title dead last, but the exact ladder depends on the element and its role, and the answer can legitimately come back empty. aria-labelledby is the odd one out: point it at several elements and the browser joins their text into one name.

Care about it the moment a screen reader says 'button' with nothing after it, reads out 'IMG_4471.png', or announces six identical 'Read more' links with no clue where they go. The browser devtools accessibility panel shows the computed name and which source won; trust that over reading your own markup.

Gotcha: apart from aria-labelledby joining its own references, the sources do not stack, they compete. The winner silently discards the rest, so an aria-label slapped on an input that already has a visible label throws that label away. Related trap: 'label in name'. If the visible text is 'Send invite' but the computed name is 'Submit', voice-control users cannot say what they see.

Ask AI for it

Audit this component for accessible names. For every interactive element (button, link, input, custom widget), report the computed accessible name and which source produced it: aria-labelledby, aria-label, an associated label element, alt text, inner text, or title. Read it out of the devtools accessibility panel rather than assuming one fixed priority list, since the computation varies by element and role and can return an empty name. Then fix anything that resolves to empty, to a filename, to a bare role like 'button', or to duplicate names across links that go to different places. Prefer visible text or a real label element as the source over ARIA, and make sure any visible words on the control also appear inside the computed name.

You might have meant

aria labelform label associationalt textscreen readeraccessibility tree