Esta traducción aún no ha sido revisada editorialmente. La versión alemana es la vinculante. Deutsche Fassung →
Barrierefreiheit
¿Por qué debe el foco del teclado ser visible en un sitio web?
El foco del teclado debe ser visible porque de lo contrario los usuarios de teclado conducen a ciegas: sin una marca visible (generalmente un marco de color alrededor del elemento activo), no se puede ver qué elemento está seleccionado actualmente y qué activará la tecla Intro en el siguiente momento. Muchos diseñadores eliminan este marco por razones ópticas, bloqueando así a los usuarios de teclado. El criterio WCAG 2.4.7 requiere una indicación de foco visible.
El marco de foco es el puntero del ratón del teclado
Los usuarios de ratón siempre ven dónde está su puntero. Los usuarios de teclado tienen el marco de foco para esto: se mueve con cada pulsación de tabulación al siguiente elemento y muestra qué activaría la tecla Intro. Si este marco desaparece, la operación se convierte en un juego de adivinanzas: como usar un ratón con un puntero invisible. La razón más común es una sola línea en las directrices de diseño que apaga el borde estándar del navegador porque se sentía molesto. La solución correcta nunca es remover, sino diseñar: un marco en su color corporativo, lo suficientemente fuerte para destacar en cualquier fondo.
Así es como el servicio de comprobación mide la visibilidad del foco mediante comparación de píxeles
El servicio de comprobación fotografía cada elemento controlado dos veces: una sin foco, otra con foco. Luego compara ambas imágenes píxel por píxel. Si el foco cambia menos del 0,2 por ciento de los píxeles alrededor del elemento, la indicación de foco es prácticamente invisible: el criterio se cuenta como violado y el informe nombra el elemento afectado junto con una captura de pantalla de prueba. Los entornos inquietos, como por animaciones, se detectan en una comparación previo de dos imágenes sin foco y se excluyen tales elementos de la evaluación. Además, el informe marca si las directrices de diseño desactivan globalmente los bordes de foco.
Beispiele
Fokusrahmen entfernt
*:focus { outline: none; }:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }outline: none macht die Tastaturbedienung blind. :focus-visible zeigt den Rahmen nur bei Tastatur, nicht beim Mausklick.
- Presione la tecla de tabulación a través de su página de inicio y observe: ¿se ve claramente en cada parada qué elemento está seleccionado actualmente?
- Pida a su agencia que elimine todas las reglas que desactiven globalmente el borde de foco.
- Establezca un marco de foco diseñado en su color corporativo: lo suficientemente fuerte para fondos claros y oscuros.
- Pruebe el foco también en imágenes y áreas de color: un marco gris delgado desaparece fácilmente.