Esta traducción aún no ha sido revisada editorialmente. La versión alemana es la vinculante. Deutsche Fassung →
Barrierefreiheit
¿Por qué un encabezado fijo nunca debe ocultar completamente el foco del teclado?
Un encabezado fijo, un aviso de cookies o un pie de página pegajoso nunca debe ocultar completamente el elemento enfocado actualmente, porque los usuarios del teclado de otro modo no verán dónde están. El criterio 2.4.11 es nuevo con WCAG 2.2: al mover el foco a través de la página, el elemento activo debe permanecer al menos parcialmente visible — incluso si partes de la página flotan sobre el contenido al desplazarse.
Cómo las barras pegajosas tragarse el foco
Muchos sitios web fijan elementos al borde de la pantalla: la barra de menú arriba, un aviso de cookies abajo, tal vez un banner de boletín en el medio. Estas capas flotan sobre el contenido. Cuando el foco del teclado se desplaza a través de la página, el elemento activo puede estar exactamente detrás de una de estas barras — el marco de foco está allí, pero nadie lo ve. Para los usuarios del teclado, se siente como si el foco desapareciera: continúan tabulando y no saben qué botón presionarán con la tecla de retorno. Especialmente engañosos son los avisos de cookies altos en la parte inferior, detrás de los cuales pueden desaparecer filas de formulario completas al tabular.
Así mide el servicio de comprobación la ocultación de foco
Durante el recorrido real del teclado, el servicio de comprobación verifica en cada parada de foco varios puntos del elemento activo: si hay una superficie opaca, fija o pegajosa sobre el elemento en todos estos puntos, se considera completamente oculto — el criterio se viola y el informe nombra el elemento junto con la foto de evidencia. La medición juzga deliberadamente con cautela: los elementos que son parte de una barra fija nunca se consideran ocultos detrás, y las superposiciones transparentes no cuentan como ocultamiento. Si el elemento permanece al menos parcialmente visible en todas las paradas, el criterio se considera cumplido.
Beispiele
Fokus hinter der klebenden Kopfzeile
header { position: sticky; top: 0; height: 80px; }
/* Tab scrollt das Element unter den Header */header { position: sticky; top: 0; height: 80px; }
html { scroll-padding-top: 88px; }scroll-padding hält beim Fokuswechsel den Bereich unter der Kopfzeile frei. Cookie-Banner fangen den Fokus ein, bis sie geschlossen sind.
- Tabule a través de su página y observe el borde inferior de la pantalla — ¿desaparece el foco temporalmente detrás del aviso de cookies?
- Mantenga las barras fijas lo más estrechas posible, especialmente en pantallas pequeñas.
- Pida a su agencia que planifique una distancia de desplazamiento al enfocar, de modo que el elemento activo nunca se ubique debajo de las barras fijas.
- Pruebe con el aviso de cookies visible — en exactamente este estado es como los primeros visitantes experimentan su página.