Fallo común WCAG 2.2
F110Elemento con el foco tapado por cabeceras, pies o avisos fijos
Nombre oficial en el W3C: Fallo del criterio de conformidad 2.4.11 debido a que un pie de página o una cabecera fijos ocultan por completo los elementos con el foco
En pocas palabras
Al navegar con el tabulador, el elemento activo debe verse. El error es que una cabecera fija, un pie fijo, un aviso de cookies o un botón de chat lo tapen por completo. La persona sabe que ha avanzado, pero no ve dónde está.
Por qué es importante
Quien navega con el teclado se guía por el indicador de foco: el recuadro que marca el elemento activo. Lo necesitan quienes no pueden usar el ratón y muchas personas con baja visión.
Si el foco queda bajo una barra fija, la persona no sabe qué enlace o botón activará al pulsar Intro. Puede enviar un formulario o abrir una página sin querer.
En el nivel AA basta con que se vea una parte del elemento. Que quede tapado del todo es fallo.
Cómo evitarlo
- Reserve espacio para las barras fijas con
scroll-padding-toposcroll-padding-bottomenhtml. Al mover el foco, el navegador dejará ese margen libre. - Haga las cabeceras y pies fijos lo más bajos posible, sobre todo en el móvil. O haga que se escondan al desplazarse.
- Evite que el aviso de cookies tape el contenido. Otra opción es que reciba el foco primero y se cierre al responder.
- Coloque los botones flotantes (chat, WhatsApp, volver arriba) donde no tapen botones ni campos.
- Cierre los menús y las ventanas que no bloquean la página cuando el foco salga de ellos.
Ejemplo práctico
Barras fijas de contacto, avisos de cookies, cabeceras «sticky» y botones de chat ocupan parte de la ventana. Si al avanzar con el tabulador el enlace con el foco queda debajo de ellos, se incumple el criterio 2.4.11 Foco no oculto (mínimo).
Así no: Barra fija inferior que tapa el enlace con el foco
La barra de ayuda tiene position: fixed y 90 px de alto. Al recorrer los trámites con el tabulador, el navegador desplaza la página lo justo para mostrar el enlace en el borde inferior. Pero ese borde queda debajo de la barra. El foco existe, pero no se ve.
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Ver el código del ejemplo incorrecto
<style>
.barra { position: fixed; left: 0; right: 0; bottom: 0; height: 90px; box-sizing: border-box; padding: 12px 16px; background: #412c56; color: #fff; }
.barra a { color: #fff; }
.barra a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
li { margin: 10px 0; }
li a:focus-visible { outline: 3px solid #744E9A; outline-offset: 2px; }
</style>
<h2>Trámites del ayuntamiento</h2>
<ul>
<li><a href="#">Alta en el padrón</a></li>
<li><a href="#">Certificado de empadronamiento</a></li>
<li><a href="#">Licencia de obra menor</a></li>
<li><a href="#">Reserva de instalaciones deportivas</a></li>
<li><a href="#">Tarjeta de aparcamiento para residentes</a></li>
<li><a href="#">Ayudas al alquiler</a></li>
<li><a href="#">Quejas y sugerencias</a></li>
<li><a href="#">Bonificación del IBI</a></li>
<li><a href="#">Recogida de enseres</a></li>
<li><a href="#">Matrícula en la escuela de música</a></li>
</ul>
<div class="barra">¿Necesita ayuda con un trámite? Llame al 010 o <a href="#">escriba al ayuntamiento</a>.</div>Así sí: Espacio reservado con scroll-padding
Se añade scroll-padding-bottom a html con la altura de la barra. Así, al mover el foco, el navegador deja ese margen libre. Además, un padding-bottom en el contenido permite que el último enlace también quede por encima de la barra. El enlace con el foco siempre se ve.
Pruébelo aquí:
Ver el código del ejemplo correcto
<style>
html { scroll-padding-bottom: 100px; }
.contenido { padding-bottom: 100px; }
.barra { position: fixed; left: 0; right: 0; bottom: 0; height: 90px; box-sizing: border-box; padding: 12px 16px; background: #412c56; color: #fff; }
.barra a { color: #fff; }
.barra a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
li { margin: 10px 0; }
li a:focus-visible { outline: 3px solid #744E9A; outline-offset: 2px; }
</style>
<div class="contenido">
<h2>Trámites del ayuntamiento</h2>
<ul>
<li><a href="#">Alta en el padrón</a></li>
<li><a href="#">Certificado de empadronamiento</a></li>
<li><a href="#">Licencia de obra menor</a></li>
<li><a href="#">Reserva de instalaciones deportivas</a></li>
<li><a href="#">Tarjeta de aparcamiento para residentes</a></li>
<li><a href="#">Ayudas al alquiler</a></li>
<li><a href="#">Quejas y sugerencias</a></li>
<li><a href="#">Bonificación del IBI</a></li>
<li><a href="#">Recogida de enseres</a></li>
<li><a href="#">Matrícula en la escuela de música</a></li>
</ul>
</div>
<div class="barra">¿Necesita ayuda con un trámite? Llame al 010 o <a href="#">escriba al ayuntamiento</a>.</div>Cómo comprobarlo
Errores frecuentes en auditorías
- Avisos de cookies fijos abajo que, mientras no se aceptan, tapan los enlaces y campos por los que se avanza con el tabulador.
- Cabeceras «sticky» que ocultan el elemento con el foco al retroceder con Mayús+Tab o al saltar a un ancla (un enlace a otra parte de la misma página).
- Botones flotantes de chat o de WhatsApp que tapan el botón de enviar de un formulario.
- Menús desplegables o ventanas que no bloquean la página y siguen abiertos encima del contenido cuando el foco ya ha salido de ellos.
Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica F110 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.
Aplicabilidad
Contenido que utiliza cualquier tecnología que admita interfaces de teclado.
Descripción
El objetivo de este fallo es evitar las situaciones en las que las personas que utilizan una interfaz de teclado (p. ej., recorriendo con el tabulador los enlaces y controles) no pueden ver dónde está el indicador debido a otro contenido creado por el autor.
Cualquier contenido «fijo» (sticky) que se mueva con la ventana gráfica puede llegar a ocultar otros elementos de la página, incluidos controles a los que el usuario puede llegar con el tabulador.
Ejemplos
Pie de página fijo
Una página web tiene un pie de página fijo, un elemento que permanece visible en la parte inferior de la ventana gráfica mientras el usuario se desplaza por la página. El pie de página tiene la altura suficiente para cubrir por completo el elemento con el foco cuando el usuario avanza hacia abajo por la página con el tabulador.
Cabecera fija
Una página web tiene una cabecera fija, un elemento que permanece visible en la parte superior de la ventana gráfica mientras el usuario se desplaza por la página. La cabecera tiene la altura suficiente para cubrir por completo el elemento con el foco cuando el usuario retrocede hacia arriba por la página con el tabulador.
Pruebas
Procedimiento
Recorrer con el tabulador los enlaces y controles de la página, tanto avanzando hacia abajo como retrocediendo hacia arriba:
- Comprobar si el elemento con el foco queda completamente oculto por otro contenido
Resultados esperados
- Si la comprobación n.º 1 es verdadera, se cumple esta condición de fallo y el contenido falla el criterio de conformidad.
Recursos
Cómo lo comprobamos en ADDAW
Este error es uno de los que buscamos en cada auditoría de ADDAW. Se lo entregamos con capturas y la forma de corregirlo.
Basado en la técnica F110 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.