Start scanning free

( Robust / WCAG 4.1.2 )

Button or link has no accessible name

This check maps to Name, Role, Value. Use the guidance below to confirm the issue, understand who it affects and ship a fix.

Critical Level A WCAG 4.1.2 — Name, Role, Value

What’s wrong

A <button> or <a> element has no text content, no aria-label, and no aria-labelledby — so its accessible name is empty.

Why it matters

Screen readers announce the accessible name of a button or link when the user focuses on it. Without a name, the screen reader says “button” or “link” with no context. Icon-only buttons — a hamburger menu, a close X, a social media icon — are the most common cause of this failure.

How to fix it

Add an accessible name via visible text, aria-label, or a visually hidden span.

Before 
<button>
  <svg><!-- hamburger icon --></svg>
</button>
<a href="/twitter">
  <svg><!-- twitter icon --></svg>
</a>
After 
<button aria-label="Open navigation menu">
  <svg aria-hidden="true"><!-- hamburger icon --></svg>
</button>

<button>
  <svg aria-hidden="true"><!-- hamburger icon --></svg>
  <span class="sr-only">Open navigation menu</span>
</button>

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Add aria-hidden="true" to decorative SVG icons so screen readers don’t try to read the SVG markup.

Learn more