Escaneo gratis

Corregir «Comando ARIA sin nombre» en HTML

Por qué es un problema

Un elemento con rol button, link o menuitem pero sin texto se anuncia como «botón» y nada más. El caso típico es el botón formado solo por un icono.

Cómo corregirlo — HTML

Dé un nombre accesible al comando: texto visible, aria-label o aria-labelledby. El icono debe llevar aria-hidden para no anunciarse dos veces.

Evitar
<div role="button" tabindex="0">
  <svg>…</svg>
</div>
Correcto
<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>

Compruebe su sitio en 30 segundos

Conformly detecta este tipo de problema en todas sus páginas, de forma continua, y le avisa en cada regresión.

Escaneo gratis

Otras correcciones