Missing ARIA Labels on Interactive Elements

Overview

Interactive elements (buttons, inputs, landmarks) must have an accessible name so assistive technology can announce what they do.

The Problem

This pattern is inaccessible — avoid it.

<button><svg>...</svg></button>  <!-- icon-only, no label -->
<div role="dialog">...</div>        <!-- no dialog title -->
<nav>...</nav>                      <!-- multiple navs, no differentiation -->

The Fix

Use this accessible pattern instead.

<button aria-label="Close dialog"><svg aria-hidden="true">...</svg></button>
<div role="dialog" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Confirm deletion</h2>
</div>
<nav aria-label="Main navigation">...</nav>
<nav aria-label="Breadcrumb">...</nav>

Step-by-step

1. 1

   Every icon-only button must have aria-label or aria-labelledby.

2. 2

   Dialogs/modals need aria-labelledby pointing to the visible heading.

3. 3

   When there are multiple <nav> landmarks, give each an aria-label.

4. 4

   Add aria-hidden="true" to decorative SVGs/icons so screen readers skip them.

Framework Notes

How to apply this fix in your stack.

// Icon button pattern
<button aria-label="Delete item">
  <TrashIcon aria-hidden="true" />
</button>

FAQ