Glossary
Accessible name
The accessible name is the short label that assistive technology announces for an element: what a screen reader says when it reaches a button, and what a voice control user says to activate it. It is computed by the browser from several possible sources in a defined order of precedence, not taken from any single attribute. An element with no accessible name is announced as its role alone — "button" — which tells the user nothing about what it does.
Where the name comes from, in order
`aria-labelledby`, which points at other elements whose text becomes the name. It wins over everything else.
`aria-label`, a string given directly on the element.
The element's own native source: the text content of a button, the associated `<label>` of a form control, the `alt` attribute of an image, the `<caption>` of a table.
`title`, as a last resort. It produces a tooltip on hover, is unavailable on touch devices, and should not be relied on as the primary name.
Because the order is precedence rather than accumulation, an `aria-label` silently overrides visible text — which is how a button reading "Save" comes to announce something else entirely.
Why icon-only controls so often have none
A button whose content is an SVG or an icon font has no text. The SVG's `title` element is not reliably used, and an icon font character is either meaningless or read aloud as a symbol.
The fix is an `aria-label` on the button, or visually hidden text inside it — positioned off-screen with CSS rather than hidden with `display: none`, which would remove it from the accessibility tree too.
The icon itself should be marked `aria-hidden="true"` so it is not announced alongside the label.
A link whose content is an image needs the same treatment through the image's `alt` attribute, which becomes the link's name.
Names that exist and do not help
"Click here", "Read more", "Learn more" repeated across a page. Screen reader users commonly navigate by pulling up a list of links, and a list of twenty identical entries is unusable.
A name that does not include the visible text, which breaks voice control: a user saying the words they can see does not activate the control.
A name describing the icon rather than the action — "magnifying glass" instead of "Search".
A name that duplicates what is already announced, such as "Search button" on an element already reported as a button.
How to check it
The browser's accessibility panel shows the computed name for any selected element, together with which source produced it.
Missing names on interactive elements are mechanically detectable and are always a finding.
Extract every link's name and look for repeats, which is the fastest way to find the generic-text problem.
Where a visible label exists, confirm the accessible name contains it, since voice control depends on that match.
Frequently asked questions
- Does aria-label override visible text?
- Yes. It takes precedence over the element's own content, which is how a button can announce something different from what it displays.
- How do I label an icon-only button?
- With an aria-label on the button, or visually hidden text inside it, and aria-hidden on the icon so it is not announced as well.
- Is the title attribute enough?
- No. It is a last-resort source, produces a tooltip only on hover, and is unavailable on touch devices.
Sources
Related
VeriFixScan crawls a site and applies its checks to every page it reaches, keeping the evidence behind each finding. Scanning one website is free.
Scan a website