How to fix empty links and buttons

WCAG: 2.4.4 Link Purpose and 4.1.2 Name, Role, Value (Level A) · Updated October 14, 2026

A link or button with no text is announced by a screen reader as just “link” or “button”. Voice control users cannot say its name to click it. The usual culprits are social media icons, cart icons, hamburger menus, close (×) buttons and carousel arrows.

Three ways to add a name

1. Visible text: best for everyone.
2. Visually hidden text: text that is in the page for screen readers but hidden visually.
3. aria-label: quick and reliable for icon-only controls.

<a href="https://instagram.com/yourbiz" aria-label="Instagram">
  <svg aria-hidden="true" focusable="false">…</svg>
</a>

<button type="button" class="menu-toggle" aria-expanded="false">
  <span class="visually-hidden">Menu</span> ☰
</button>

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

Also check

• Image links: the image alt becomes the link name, so a linked logo needs alt text.
• Links that wrap a whole card should still have one clear name, usually the card heading.
• Do not use <div onclick> for buttons; a real <button> is focusable and announced correctly.

Step by step

1. Find unnamed controls. Scan the page and review the link-name and button-name results.
2. Add a name. Add visible text, visually hidden text, or an aria-label to each control.
3. Hide decorative icons. Add aria-hidden="true" to icons inside named controls.
4. Re-scan. Confirm the issues are gone.

Automated accessibility scan. Results are informational and may not identify every accessibility issue. This service is not legal advice, a compliance certification, or a substitute for comprehensive manual accessibility testing.