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.
Overview
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 must be interactive, provide a clear accessible name and ensure it has the correct semantic role/behavior.
Developer Guidance
This issue often occurs when `tabindex="0"` is added to generic containers or placeholder links/buttons are left empty. Audit tab order and eliminate meaningless stops before release.
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 Implementation
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. Verify every focus stop corresponds to a real interactive function.
- 3. With a screen reader enabled, confirm each focusable item has a meaningful announced name.
- 4. Remove focusability from non-interactive stops, or add proper naming/semantics where interaction is intended.
- 5. Re-test to confirm no empty or ambiguous focus stops remain.
Related Robust Rules
Trusted by organizations across Europe working toward WCAG and EAA conformance