Esta traducción aún no ha sido revisada editorialmente. La versión alemana es la vinculante. Deutsche Fassung →
Barrierefreiheit
¿Qué es una trampa de teclado en un sitio web?
Una trampa de teclado es un lugar en un sitio web donde la marca de teclado se queda atrapada: quien la presiona con la tecla de tabulación nunca puede salir usando solo el teclado. Para personas sin ratón, el sitio termina en este lugar: es imposible seguir leyendo, hacer un pedido o enviar un formulario. Los desencadenantes comunes son selectores de fecha, ventanas de chat, videos incrustados y galerías de imágenes. El criterio WCAG 2.1.2 prohíbe tales trampas.
Así es como surge una trampa de teclado
La mayoría de las trampas de teclado no se construyen intencionalmente. Surgen de componentes listos para usar de terceros: un selector de fecha atrapa el foco para que sus días de calendario sean accesibles mediante flechas, pero olvida la salida. Una ventana de chat mantiene la marca en su campo de entrada. Un cuadro de diálogo personalizado sin botón de cierre deja el foco girando entre sus dos botones. Con el ratón nunca se nota, ya que los usuarios de ratón simplemente hacen clic en otro lugar. Por eso las trampas de teclado a menudo permanecen sin detectar durante meses, mientras que los usuarios de teclado abandonan el sitio en ese mismo lugar.
Así es como el servicio de comprobación mide la trampa de teclado
El servicio de comprobación presiona la tecla de tabulación en su página de forma real y registra cada parada con posición y elemento. Si la marca gira entre los mismos pocos elementos sin alcanzar el final del documento, se cuenta como una trampa de teclado. El informe nombra los elementos involucrados y adjunta una captura de pantalla de prueba. Si el foco gira dentro de un marco incrustado de un proveedor externo, el informe marca el caso para revisión manual: allí no se puede decidir de forma segura si hay una salida. Si la medición alcanza el final del documento sin girar, el criterio se considera aprobado.
Beispiele
Dialog ohne Ausgang
<div role="dialog" aria-modal="true">
<p>Newsletter?</p>
<input type="email">
<!-- kein Schließen-Knopf, Escape ohne Wirkung -->
</div><dialog id="nl">
<p>Newsletter?</p>
<input type="email">
<button type="button" onclick="nl.close()">Schließen</button>
</dialog>
<!-- dialog schließt mit Escape von selbst -->Aus jedem Bereich muss die Tastatur wieder herauskommen: mit Tab, Escape oder einem beschriebenen Weg.
- Tabulador completamente a través de su página de inicio hasta el pie de página: si se queda atrapado en algún lugar, ha encontrado la trampa.
- Pruebe cada nuevo componente externo individualmente: selector de fecha, ventana de chat, carrusel, reproductor de video.
- Pida a su agencia que dé a cada cuadro de diálogo una forma de cierre accesible por teclado, como mínimo la tecla Escape.
- Vuelva a probar después de cada actualización de los componentes instalados: una nueva versión puede introducir una trampa.