</>
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.

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.

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.

Check Your Accessibility Now

Our accessibility checker detects this issue automatically.

Open Accessibility Checker
Recommended

Hostinger Fast & Affordable Web Hosting

Deploy accessible, validated code on reliable hosting.

Get 80% Off Hosting →

Related Accessibility Errors

View all accessibility errors