Ensure focusable elements contain visible and meaningful text
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 clearly say what it does — visually and programmatically.
Overview
Why this matters
Focusable elements without clear meaning create dead-end navigation for keyboard and assistive technology users. Users need a reliable name/purpose at every focus stop to understand what action is available.
How to fix this issue
Ensure each focusable element has a meaningful accessible name from visible text, `aria-label`, or `aria-labelledby`. Remove focusability from non-interactive elements and avoid empty `<button>` or `<a>` controls.
Developer Guidance
This issue commonly occurs with icon buttons, empty interactive tags, and custom widgets using tabindex. Enforce naming requirements at component level and block empty focusable controls in lint/test rules.
Code Examples
Incorrect Implementation
<button></button>
<a href="#"></a>Correct Implementation
<button aria-label="Close"><svg><use href="#icon-close"/></svg></button>
<a href="/home">Home</a>Real-World Implementation
Before
<a href="/cart"></a> <!-- Screen reader: 'link', visual: blank -->After
<a href="/cart" aria-label="View cart"><svg><use href="#icon-cart"/></svg></a>CSS Example (Guidance)
/* Ensure focusable elements have visible focus and accessible text */
button:focus, a:focus {
outline: 2px solid #2563eb;
outline-offset: 2px;
}
.icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
color: #111;
background: #fff;
border: 1px solid #000;
padding: 0.5rem;
}Manual Testing
- 1. Use Tab to navigate through every focusable element.
- 2. For each focus stop, confirm you can visually identify what it does.
- 3. With a screen reader enabled, ensure each element is announced with a meaningful name.
- 4. If an element has no visible meaning and no accessible name → fix it.
- 5. Re-test after adding visible text or `aria-label`/`aria-labelledby`.
Related Operable Rules
Trusted by organizations across Europe working toward WCAG and EAA conformance