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.
Why this matters and how to fix it
Why this matters
If focusable elements have no visible or meaningful text, users who rely on keyboard or screen readers cannot determine the element's purpose. This leads to confusion and prevents users from confidently navigating the interface.
How to fix this issue
Ensure each focusable element includes visible text or an accessible name via `aria-label` or `aria-labelledby`. Avoid empty <button> or <a> tags. Icon-only controls must include accessible names.
Developer guidance
This issue commonly occurs with icon buttons, empty interactive tags, and custom controls. Always confirm that both keyboard users and screen reader users can identify the control's action. Test by tabbing through the interface without a mouse.
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 Examples
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`.
Trusted by organizations across Europe working toward WCAG and EAA conformance