Elemento clicable inalcanzable por teclado

WCAG 2.1.1, 4.1.2 (A) · EN 301 549 9.2.1.1

Hay un <{tag}> con manejador de clic pero sin rol ni posición en el orden de tabulación.

Por qué importa

El ratón puede hacer clic en cualquier cosa; el teclado no. Un <div> con onclick es invisible para quien navega con tabulador, con conmutador o con control por voz. Si ese div es «Añadir al carrito», la tienda no es utilizable.

Es el fallo que con más frecuencia deja un checkout completamente bloqueado.

Cómo se arregla

Usa <button>. Resuelve el foco, la activación con Enter y espacio, y el anuncio del rol, todo de una vez y sin JavaScript adicional.

<div onclick="anadirAlCarrito()">Añadir al carrito</div>

<button type="button" onclick="anadirAlCarrito()">Añadir al carrito</button>

Relacionado

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