Accessible Name
Every interactive element needs a computed accessible name. Sources (in priority): aria-labelledby → aria-label → <label> → text content → title. Empty name = invisible to assistive tech.
The name assistive tech announces for a control. If it's blank, the button is effectively unlabeled and unusable by screen readers.
The accessible name computation is defined in the WAI-ARIA specification and follows a strict priority order. Understanding this cascade is essential for debugging why an element has the wrong name or no name at all.
Common failures: icon-only buttons without aria-label, images used as links without alt text, custom components that don't forward labels, and aria-label that doesn't match the visible text (violating 2.5.3).
Why this matters
Every interactive element must have a computed accessible name — it's how screen readers identify what something is. An icon button without a name is announced as just "button" — completely meaningless. This underpins virtually every other accessibility requirement.
How to detect
Open DevTools → Accessibility tab and check the "Name" computed property for every interactive element. Empty names are critical failures. Also check that names match visible text (WCAG 2.5.3 Label in Name).
How to fix
<!-- Text content provides the name --> <button>Save</button> <!-- name: "Save" --> <!-- aria-label for icon-only buttons --> <button aria-label="Close"> <svg>...</svg> </button> <!-- aria-labelledby for complex names --> <h2 id="section-title">Shipping</h2> <form aria-labelledby="section-title">...</form> <!-- Name computation priority: --> <!-- 1. aria-labelledby --> <!-- 2. aria-label --> <!-- 3. <label> (for inputs) --> <!-- 4. Text content --> <!-- 5. title attribute (last resort) -->