ARIA Label
Definition
aria-label takes a string and makes it the element's accessible name, overriding whatever text the element contains. The classic use is a control with no words in it, such as a close button that is only an X glyph, or a search input with a magnifier icon in place of a label. Its sibling aria-labelledby points at visible text elsewhere on the page and is generally the better choice, because the name then matches what people can see. The naming order is fixed: aria-labelledby wins, then aria-label, then the element's own content or alt attribute, then title. One limit surprises people — aria-label does nothing on an element with a generic role, so putting it on a plain div or span produces no name at all.
Why It Matters
The advice that most needs repeating is the first rule of ARIA, written into the W3C's own authoring practices: do not use ARIA if a native element or attribute already carries the semantics and behaviour you want. The second piece of advice is blunter — no ARIA is better than bad ARIA. A wrong label is worse than none, because a missing name leaves a user to investigate, while a wrong one confidently sends them somewhere else. WebAIM's yearly scan keeps finding that home pages using ARIA average roughly a third more detected errors than pages without it. That is correlation rather than proof, but the direction has held for years, and it reflects how easy it is to mislabel a control that a plain button would have named itself.
How It Works
When the accessibility tree is built, each node's name is computed from that fixed order of sources, and the result is what a screen reader speaks after the role — 'Close panel, button'. The string is a flat label with no markup, so line breaks and emphasis are lost. It is also plain text in an attribute, which means browser page translation may leave it in the original language while the visible text around it is translated. Voice control adds a further constraint: users say the words they can see, so WCAG success criterion 2.5.3 Label in Name, at Level A since 2.1, requires the accessible name to contain the visible label text. A button reading 'Send' with an aria-label of 'Submit enquiry form' fails that criterion outright.
Real-World Example
A single-file dashboard published at metrics.99helpers.site has a row of icon-only controls in the top corner. Without names, a screen reader reads 'button, button, button', and the user has to activate each to find out what it does. Giving them aria-label values of 'Refresh data', 'Export CSV' and 'Close panel' makes the row usable in one pass. The nearby 'Save view' control, which already shows those words, gets no aria-label at all — its visible text is the better name, and adding a different one would break Label in Name. The page is one HTML file, so the fix is a re-upload to the same address.
Common Mistakes
- ✕Putting aria-label on a div or a span — an element with a generic role takes no name from it, so the label is silently discarded
- ✕Giving a control an aria-label that differs from its visible text — it breaks voice control and fails success criterion 2.5.3 Label in Name
- ✕Reaching for role of button plus aria-label on a div instead of writing a button element — you inherit all the keyboard work and gain nothing
- ✕Labelling a link 'Read more about pricing' while the visible text says 'Read more' — the extra words help, but they must wrap the visible ones, not replace them
Related Terms
Accessible Name
The accessible name is the short string that identifies an element to assistive technology — the words a screen reader speaks when focus lands on a link, button or field. Browsers work it out from several possible sources in a fixed order.
Semantic HTML
Semantic HTML means using the element that matches the meaning of the content — button, nav, h2, label, table — rather than styling a generic div or span to look the part.
Form Label
A form label is the visible text tied programmatically to an input, so that software as well as sighted readers knows what belongs in the box. In HTML it is a label element linked to the field by id.
Screen Reader
A screen reader is software that turns what is on screen into speech or braille and gives the user a keyboard interface for moving through it. JAWS, NVDA, VoiceOver, Narrator and TalkBack are the ones in common use.
Generated HTML
Generated HTML is markup produced by a program or a model rather than typed by a person. From a browser's point of view it is indistinguishable from hand-written HTML, and a static host serves it the same way.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →