Accessible Name

The accessible name is the programmatically determined text string that identifies a user interface element to assistive technologies. When a screen reader announces "Submit, button" or "Email address, edit text," the words "Submit" and "Email address" are the accessible names of those elements. Every interactive element on a web page needs an accessible name so assistive technology users can understand what it is and what it does. The accessible name is computed through a standardized algorithm defined in the W3C's Accessible Name and Description Computation (AccName) specification. This algorithm checks multiple sources in a defined priority order and uses the first one it finds. Understanding this priority order is essential for developers who need to ensure their elements have correct and predictable names. The accessible name is distinct from the accessible description. The name is the primary identifier, announced immediately. The description is supplementary context, announced after the name (typically after a pause). The name answers "what is this?" while the description answers "what else should I know about this?"

Without accessible names, interactive elements are announced to screen reader users as only their role: "button," "link," "text input." The user hears that something exists but has no idea what it does. A page with five buttons all announced as just "button" is essentially unusable for a screen reader user. WCAG has three success criteria that directly relate to accessible names. Criterion 4.1.2 (Name, Role, Value) requires that all user interface components have a programmatically determinable name. Criterion 1.1.1 (Non-text Content) requires text alternatives for non-text content, which contributes to accessible names for images and icons. Criterion 2.5.3 (Label in Name) requires that when a component has a visible text label, the accessible name includes that visible text. The Label in Name criterion (2.5.3) is particularly important for voice control users. These users activate elements by speaking their visible labels. If a button's visible text says "Search" but its accessible name is "Find results," a voice control user who says "Click Search" will fail because the accessible name doesn't contain the word "Search."

The AccName computation algorithm checks sources in this priority order: 1. **aria-labelledby** - References one or more elements whose text content becomes the name. Takes highest priority. 2. **aria-label** - A string attribute directly providing the name. 3. **Native HTML labeling** - The `<label>` element (for form controls), the `alt` attribute (for images), the `<caption>` element (for tables), or the `<legend>` element (for fieldsets). 4. **Text content** - The visible text inside the element (for buttons, links, and other elements that allow name from content). 5. **title attribute** - Used as a last resort if no other source is available. ```html <!-- Name from text content: "Save Changes" --> <button>Save Changes</button> <!-- Name from label element: "Email Address" --> <label for="email">Email Address</label> <input type="email" id="email"> <!-- Name from aria-label: "Close dialog" --> <button aria-label="Close dialog">X</button> <!-- Name from aria-labelledby: "Username Password" --> <div id="lbl1">Username</div> <div id="lbl2">Password</div> <input aria-labelledby="lbl1 lbl2"> <!-- Name from alt attribute: "Company logo" --> <img src="logo.png" alt="Company logo"> ``` **Best practices for accessible names:** - **Keep names concise and descriptive.** "Submit application" is better than "Click here to submit your application form to our system." - **Make names unique when possible.** Multiple "Read more" links on a page are ambiguous. "Read more about pricing" and "Read more about features" provide clear context. - **Ensure visible labels match accessible names.** If a button visually says "Search," its accessible name should include "Search" for voice control compatibility. - **Don't rely on the title attribute.** It has the lowest priority and is not consistently exposed by assistive technologies. Use it only as a last resort. - **Test with screen readers.** The AccName algorithm is complex, and edge cases can produce unexpected results. Testing reveals what screen readers actually announce. Browser developer tools can help you inspect accessible names. Chrome DevTools, Firefox Accessibility Inspector, and Safari's accessibility audit all display the computed accessible name for selected elements. This is invaluable for debugging naming issues.