Avoid empty focusable elements with no accessible name
Content available in English only.
Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
If it can be focused, it must have a purpose and a name.
Why this matters and how to fix it
Why this matters
If an element can receive keyboard focus but lacks an accessible name, screen reader users cannot understand its purpose. The user may hear only 'button' or 'link' with no context, leading to confusion and unusable navigation.
How to fix this issue
Remove focusability from elements that do not perform actions. If the element is interactive, provide visible text or an accessible name using `aria-label` or `aria-labelledby`.
Developer guidance
This issue often occurs when `tabindex="0"` is applied to non-interactive elements or when placeholder links/buttons are added before content is finalized. Audit tab order and ensure each focus stop has clear meaning.
Code examples
Incorrect Implementation
<div tabindex="0"></div>
<a href="#"></a>Correct Implementation
<div>Non-interactive text</div>
<a href="/contact">Contact us</a>Real-World Examples
Before
<span tabindex="0"></span> <!-- Screen reader announces 'button' or 'focusable' but with no purpose -->After
<button aria-label="Open menu"><svg><use href="#icon-menu"/></svg></button> <!-- Accessible name clearly indicates purpose -->CSS Example (Guidance)
/* Ensure focusable elements have visible text or accessible names */
.focusable:focus {
outline: 2px solid #2563eb;
outline-offset: 2px;
}
button, a {
color: #111;
background: #fff;
border: 1px solid #000;
padding: 0.5rem 1rem;
}Manual testing
- 1. Navigate the page using Tab and Shift+Tab only.
- 2. Stop at each focusable element and note what is visually shown.
- 3. With a screen reader enabled, confirm that each element is announced with a meaningful name.
- 4. If an element is focusable but has no purpose or no name, remove focusability or add an accessible label.
- 5. Re-test until all focus stops are meaningful and navigable.
Trusted by organizations across Europe working toward WCAG and EAA conformance