Accessible Name: What It Is and How It Is Computed
Also called: Accessible label, Computed name, Programmatic name
Definition
The accessible name is the text that browsers pass to assistive technology to identify an element – for example the words a screen reader announces for a button, link or form field. WCAG 4.1.2 requires a programmatically determinable name for every user interface component.
An accessible name is the text a browser hands to assistive technology to identify a link, button, form field or other control. A screen reader reads it aloud ("Search, button"), and voice control software matches spoken commands against it. Without an accessible name, a control is announced only by its role – and people have to guess what it does.
What it means
WCAG 4.1.2 Name, Role, Value is a Level A criterion of WCAG 2.2. It requires that the name and role of every user interface component – form elements, links and components generated by scripts – can be programmatically determined. W3C notes that the name may be hidden, but when it is visible it is called a label. A control without a programmatic name is listed as failure F68.
The browser computes the name from several sources and takes the first one that exists. In simplified order:
| Priority | Source | Example |
|---|---|---|
| 1 | aria-labelledby (text of the referenced element) |
<button aria-labelledby="t1"> |
| 2 | aria-label |
<button aria-label="Close"> |
| 3 | Native labelling | <label for>, alt on images, <caption>, <legend> |
| 4 | Text content (links, buttons, headings) | <a href="/cart">Cart</a> |
| 5 | title or placeholder as a last resort |
<input title="Search"> |
This is why one element can have visible text and still a different name: an aria-label overrides the visible text. Scanners report a missing name as empty button, empty link, missing form label or "Image has no alt text".
Examples
<!-- No accessible name: announced as "button" only -->
<button><svg aria-hidden="true">…</svg></button>
<!-- Name from aria-label -->
<button aria-label="Open menu"><svg aria-hidden="true">…</svg></button>
<!-- Name from a label element -->
<label for="email">Email address</label>
<input id="email" type="email">
<!-- Name from alt text of the only image in a link -->
<a href="/"><img src="logo.svg" alt="allyWay home"></a>Give every control a short, unique name that describes its purpose: "Search", "Add to cart", "Next slide". Use visible text or a <label> where you can, and make sure the name starts with the visible words.
Rely on title or placeholder alone, name every icon "button" or "icon", or add an aria-label that contradicts the visible text ("Submit" on a button that reads "Send").
How to check the accessible name
Questions
What is the difference between an accessible name and a label?
A label is visible text, such as a <label> next to a field. The accessible name is what assistive technology receives – often taken from the label, but it can also come from aria-label, alt text or the element's content.
Where does the accessible name of a button come from?
Usually from its text content. If the button only holds an icon, use aria-label or aria-labelledby, or alt text on an image inside it. A title attribute is only a last resort.
Can an accessible name be too long?
WCAG sets no length limit, but long names slow screen reader users down. Keep the name to the purpose in a few words and put extra information in a description.
How do I find elements without an accessible name?
Run the free WCAG scanner on your homepage – it reports links, buttons and fields without a name.
Can allyWay fix missing accessible names automatically?
Yes. allyWay gives unnamed links and buttons clear names that screen readers can read aloud, and adds labels to fields without them – written by AI from your page content. The automatic fixes are applied by the allyWay script without changes to your theme or code, and every fix can be changed back in one click. Start for free and see which elements allyWay names on your site.
Related terms
Empty Button: What the Error Means and How to Fix It
An empty button is a button element with no accessible name – no text, no aria-label and no alt text on an image inside it. Screen readers announce only that it is a button, not what it does.
Read definition: Empty Button: What the Error Means and How to Fix ItEmpty Link: What the Error Means and How to Fix It
An empty link is a link element that has no accessible name – no text, no alt text on an image inside it and no aria-label. Screen readers can only announce it as a bare link, so users cannot tell where it leads.
Read definition: Empty Link: What the Error Means and How to Fix ItMissing Form Label: Error Explained and Fixed
A missing form label means an input field, checkbox, select or textarea has no programmatically associated label or other accessible name. Screen readers announce only the field type, so users do not know what to enter.
Read definition: Missing Form Label: Error Explained and Fixedaria-label: How to Name Elements Correctly
aria-label is an ARIA attribute that sets the accessible name of an element as a text string. Screen readers announce this name instead of the element's content, so it is used mainly for controls without visible text, such as icon buttons.
Read definition: aria-label: How to Name Elements Correctly