Contenido oculto a lectores de pantalla pero accesible por teclado

WCAG 4.1.2, 1.3.1 (A) · EN 301 549 9.4.1.2

Hay un elemento con aria-hidden="true" que contiene elementos que reciben el foco.

Por qué importa

Crea la peor combinación posible: quien navega con teclado llega al elemento con el tabulador, pero el lector de pantalla no anuncia nada. El foco desaparece en un agujero. Ocurre casi siempre con menús o modales que se ocultan con aria-hidden pero no se retiran del orden de tabulación.

Cómo se arregla

Cuando ocultes algo, ocúltalo de verdad: usa display:none o el atributo hidden, o añade tabindex="-1" a todos los elementos focalizables de dentro.

<div aria-hidden="true">
  <a href="/x">Enlace alcanzable con Tab</a>
</div>

<div hidden>
  <a href="/x">Enlace</a>
</div>

Relacionado

• Botón de imagen sin texto alternativo
• Marco incrustado sin título
• Campos de formulario sin etiqueta
• Botones sin nombre