</>
ValidateHTML

Missing ARIA Labels on Interactive Elements

Every interactive element (links, buttons, inputs) needs an accessible name that screen readers can announce. Most elements get their name from their text content or associated label. But icon-only buttons, image links, and custom widgets often have no visible text, leaving screen readers with nothing to announce.

Find this error in your own code. Paste your HTML or enter a URL, free and instant.Open the checker
41.3%
of sites tested

How common is this error?

We ran this validator over the home page of the Tranco top 5,000 websites in August 2026. 1,096 of the 2,655 sites we could reach hit it. That makes it the 3rd most common accessibility problem we found, across 7,697 occurrences. See the full study.

Most frequent wording: Landmarks must have a non-empty and unique accessible name (aria-label or aria-labelledby)

Why It Matters

An interactive element without an accessible name is announced as just 'button' or 'link' by screen readers, giving users no idea what it does. This is a WCAG 2.1 Level A violation and makes the interface completely unusable for screen reader users.

Common Causes

  • Building icon-only buttons (hamburger, close, search) where the visual meaning is never exposed as text.
  • Wrapping an image with no alt text in a link, leaving the link with no accessible name.
  • Creating custom widgets from <div> or <span> with click handlers but no role or aria-label for assistive tech.

Code Examples

Inaccessible
<!-- Icon button with no accessible name -->
<button><svg>...</svg></button>

<!-- Link with only an image, no alt -->
<a href="/home"><img src="logo.png"></a>

<!-- Input with no label or aria-label -->
<input type="search" placeholder="Search...">
Accessible
<!-- Icon button with aria-label -->
<button aria-label="Close menu"><svg>...</svg></button>

<!-- Link with image alt text -->
<a href="/home"><img src="logo.png" alt="Homepage"></a>

<!-- Input with aria-label -->
<input type="search" aria-label="Search the site" placeholder="Search...">

How to Fix

  • 1Add aria-label to icon-only buttons and links that have no visible text.
  • 2Use aria-labelledby to reference an existing visible element as the label.
  • 3For images inside links, make sure the image has descriptive alt text.
  • 4Prefer visible text labels over aria-label when possible. Visible labels benefit all users.

Frequently Asked Questions

When should I use aria-label versus aria-labelledby?
Use aria-label when there is no visible text to reference, supplying the name as a string. Use aria-labelledby when a visible element already contains the right text: point it at that element's id so the name stays in sync with the visible label.
Does aria-label override the element's visible text?
Yes. aria-label replaces any text content as the accessible name, so screen reader users hear the aria-label and not the visible text. Only use it when the element has no text, or be sure the two match to avoid confusion.
Can I just add a title attribute instead?
No. The title attribute is unreliable: it is not announced consistently by screen readers and only appears on mouse hover, so it fails touch and keyboard users. Use aria-label, aria-labelledby, or visible text for the accessible name.

Check Your Accessibility Now

Our accessibility checker detects this issue automatically.

Open Accessibility Checker

Related Accessibility Errors

Missing Form Labels

Missing form labels leave inputs unreadable to screen readers and hurt usability. Learn how to label every form field correctly for WCAG compliance, step by step.

Missing Alt Text on Images

Missing alt text hides images from screen readers and Google Images. Learn why alt attributes matter for accessibility and SEO, and how to write them well.

Missing Button Type Attribute

A missing button type attribute defaults to submit, causing accidental form submissions and data loss. Learn how to set the right button type every time.

View all accessibility errors