What is an accessible name and how is it computed for interactive elements?

The accessible name and description computation (ANDC) algorithm runs in priority order:

1. aria-labelledby (highest priority): the element's name comes from the text of another element(s) referenced by ID. Used for complex labels that reference multiple text nodes.
2. aria-label: an explicit string provided directly on the element. Overrides everything below it.
3. Native labelling mechanism: varies by element type. For <input>, it's the associated <label> element (via for/id or wrapping). For <button>, it's the button's text content. For <img>, it's the alt attribute.
4. Element content (lowest): for some roles (button, link), the text content of the element itself serves as the name.
5. No name: if all of the above are absent, the element has no accessible name — a failure.

Common failures:

• Icon-only buttons with no label: a <button> containing only an SVG icon has no accessible name unless the icon has a title or aria-label is added to the button.
• Placeholder as the only label: placeholder text is not part of the accessible name computation for inputs — it disappears when the user starts typing and is never a label substitute.
• Unlabelled inputs: <input type="email"> with no <label>, no aria-label, and no aria-labelledby has no accessible name.

Testing: inspect the Accessibility pane in DevTools. The "Name" field shows the computed accessible name. If it's empty for an interactive element, that's a bug.