Cuidado con el uso de posicionamiento fijo
Uno de los patrones de diseño más comunes con el que nos encontramos en la web es el header con posicionamiento fijo o sticky. Es una tendencia que partió hace muchos años y sigue siendo muy popular.
El patrón consiste en posicionar el header de manera fija en la parte superior del navegador, encima del resto del contenido. Esto permite que la navegación esté permanentemente visible, aun cuando el usuario se desplaza hacia abajo.
Ejemplos en sitios chilenos
Revisamos sitios de supermercados para ver cuántos utilizan este patrón. De los 3 sitios examinados, todos tienen un header con posicionamiento fijo.
Lider
Jumbo
Tottus
El problema
Al estar situado por encima del contenido, puede dificultar la navegación ya que obstruye la visión de este. En un computador de escritorio con un nivel de zoom al 100% esto puede ser un inconveniente bastante menor, sobre todo si la altura del elemento es relativamente pequeña. Sin embargo, personas en situación de discapacidad visual que necesitan hacer zoom para poder ver mejor el contenido usualmente tienen una experiencia bastante distinta ya que el contenido obstruido en la pantalla es mayor.
Veamos que ocurre en el sitio de Lider al hacer zoom a un 400%.
El header cubre un poco más del 60% de la pantalla, sin mencionar el botón para volver al comienzo de la página que también tiene una posición fija.
¿Qué dicen las pautas de accesibilidad?
Esto claramente es un problema de accesibilidad, pero existe algún criterio de conformidad que sea aplicable? La respuesta es sí y no, es un área gris, como existen varias en las pautas de accesibilidad para el contenido web. En este caso el criterio de conformidad 1.4.10 Reajuste podría ser aplicado. Veamos primero qué dice el texto normativo:
El contenido se puede presentar sin perder información ni funcionalidad, y sin necesidad de desplazamiento en dos dimensiones, para:
- Contenido en desplazamiento vertical con una anchura equivalente a 320 píxeles en CSS;
- Contenido en desplazamiento horizontal con una altura equivalente a 256 píxeles en CSS;
Excepto para aquellas partes del contenido que debido a su uso o significado requieran desplazamiento bidimensional.
En otras palabras el criterio indica que contenido que se desplaza en forma vertical debe funcionar a un ancho de 320px, y contenido que se desplaza en forma horizontal a una altura de 256px.
Para cada una de estas condiciones, no puede haber pérdida de contenido ni desplazamiento en 2 dimensiones (existen excepciones).
El objetivo de este criterio es ayudar a personas con baja visión que necesitan agrandar el texto para poder leerlo en una sola columna.
Al hacer zoom a 400%, debiese existir un reajuste en el layout y el contenido debe ser presentado en una sola columna sin que exista desplazamiento en múltiples direcciones.
Cabe mencionar que este criterio fue añadido en la versión 2.1 el año 2018, en parte porque para entonces existían técnicas para poder hacer esto a través del diseño responsive, algo que no existía en el 2008 cuando se publicó la versión 2.0.
Cómo probamos el criterio?
Para nuestro caso en particular el procedimiento sería:
- Ajustar el navegador a un ancho de 1280px (320px por 4).
- Hacer zoom a un 400%.
- Verificar que no exista pérdida de contenido ni posibilidad de desplazamiento horizontal.
Es importante recalcar que el zoom es a un 400%, no hasta 400%. Puedes hacer zoom a un 150%, encontrar contenido que requiera desplazamiento horizontal y no sería un fallo al criterio. Todo contenido que requiera desplazamiento en 2 dimensiones entre un nivel de zoom de 100% a 399% no es aplicable al criterio, solo cuando haces zoom a 400% exacto desde el ancho indicado. Ni más, ni menos.
Cómo se relaciona con el posicionamiento fijo?
El elemento con posicionamiento fijo cubre parte del contenido, en algunos casos, una gran porción. Por tanto se podría argumentar que existe pérdida de contenido.
Es más, el criterio de conformidad incluye como posible solución a este problema la técnica C34: Using media queries to un-fixing sticky headers / footers , en español: usar media queries para desactivar el posicionamiento fijo.
La solución consiste en utilizar una media query para quitar el posicionamiento fijo a cierta altura. Permitiendo al usuario navegar sin obstrucción.
La pregunta ahora es, ¿a qué altura? y cuanto porcentaje de la pantalla debe estar disponible para que no sea considerado un problema? de nuevo, es un área gris. La técnica no menciona un tamaño en específico. Muestra un par de ejemplos con distintos tamaños, pero en la sección de procedimiento el lenguaje es ambiguo. En nuestra experiencia, aproximadamente 500px suele ser un valor apropiado para una media query.
Es importante mencionar también que la técnica C34 es parte de la categoría recomendable. Las técnicas se dividen en 2 categorías: suficientes y recomendables. Las suficientes representan ejemplos de lo mínimo requerido para cumplir con el criterio, las recomendables son recomendaciones de como hacer el contenido más accesible. Y en ningún caso alguna de las dos son un requisito para cumplir un criterio ya que las técnicas son sólo informativas. Si se cumple o falla un criterio es determinado por el texto normativo. Por tanto, el ejemplo que hemos discutido, técnicamente no es considerado un fallo, pero sí se reconoce como un problema y existe una recomendación.
Conclusión
- El uso de posicionamiento fijo en elementos debe ser usado con cuidado. Se debe desactivar con una media query y se deben hacer pruebas para asegurar que no exista pérdida ni obstrucción de contenido en distintos niveles de zoom.
- Las pautas de accesibilidad para el contenido web son el piso, no el techo. Tienen limitaciones y no deben ser vistas como el objetivo final. Son lo mínimo requerido. Nuestra responsabilidad es crear contenido accesible para nuestros usuarios, no seguir las pautas al pie de la letra y dar por hecho que nuestro contenido es accesible, ya que como hemos visto, no cubren todos los casos.