Free scan

Fix "ARIA command without a name" in HTML

Why it's a problem

An element carrying a button, link or menuitem role but no text is announced as “button” and nothing else. The icon-only button is the classic case. With 576 occurrences across 49 pages, it is the failure that repeats most within a single page.

How to fix it — HTML

Give the command an accessible name: visible text, an aria-label, or an aria-labelledby pointing at an existing label. The icon's own title is not enough, and a lone icon should carry aria-hidden so it is not announced twice.

Avoid
<div role="button" tabindex="0">
  <svg>…</svg>
</div>
Correct
<button type="button" aria-label="Fermer la fenêtre">
  <svg aria-hidden="true">…</svg>
</button>

<!-- Ou, si un libellé existe déjà dans la page : -->
<h2 id="titre-panneau">Filtres</h2>
<button type="button" aria-labelledby="titre-panneau">
  <svg aria-hidden="true">…</svg>
</button>

Check your site in 30 seconds

Conformly detects this kind of issue across all your pages, continuously, and alerts you on every regression.

Free scan

Other fixes