Fallo común WCAG 2.2
F102Contenido que desaparece al estrechar la pantalla a 320 píxeles
Nombre oficial en el W3C: Fallo del criterio de conformidad 1.4.10 debido a que el contenido desaparece y no está disponible al reajustarse a una ventana gráfica de 320 píxeles
En pocas palabras
El error ocurre cuando, al ver la web en una pantalla estrecha o con mucho zoom, parte del contenido desaparece. No tiene que verse igual que en el ordenador. Pero todo debe seguir disponible: más abajo, en un desplegable o en otra página enlazada.
Por qué es importante
Muchas personas con baja visión amplían la página al 400 %. Con ese zoom, la pantalla del ordenador se comporta como un móvil de 320 píxeles de ancho.
Si el diseño para móvil quita el buscador, la columna de noticias o las etiquetas de un formulario, esa persona pierde información y funciones. Los demás sí las tienen. Ella simplemente no puede llegar a ese contenido.
Cómo evitarlo
- Al pasar a una sola columna, recoloque el contenido en lugar de ocultarlo. Por ejemplo, la barra lateral puede ir debajo del texto principal.
- Si algo no cabe, ofrézcalo de otra manera: un botón que despliegue el buscador, un menú plegable o un enlace a otra página.
- Mantenga visibles las etiquetas de los campos. No las cambie por el texto de ejemplo del campo (
placeholder), que desaparece al escribir. - Revise las reglas
display: nonede sus estilos para pantallas pequeñas. Cada elemento oculto debe tener otra vía de acceso. - Las imágenes con información, como un plano o un cartel con horarios, deben seguir disponibles o tener un texto equivalente.
Cómo comprobarlo
- Abrir la página en el ordenador a 1280 píxeles de ancho y anotar lo que hay: menús, buscador, columnas, imágenes, avisos.
- Ampliar el zoom del navegador al 400 % (Ctrl y +). También vale estrechar la ventana o usar el modo dispositivo de las herramientas del navegador (F12) a 320 píxeles.
- Buscar cada elemento anotado. Si alguno no aparece y no hay forma de llegar a él (desplegable, botón o enlace), hay fallo.
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 F102 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
Todas las tecnologías.
Descripción
Este documento describe un fallo que se produce cuando un cambio del ancho de la ventana gráfica (viewport) a 320 px hace desaparecer contenido que estaba disponible con anchos de ventana gráfica mayores. Puede que parte del contenido disponible con anchos mayores no se muestre de la misma forma ni en la misma posición con un ancho de ventana gráfica de 320 px, simplemente porque hay menos espacio («superficie» de pantalla) para presentarlo. No obstante, ese contenido debería seguir estando disponible tras el reajuste (reflow) a un ancho de ventana gráfica de 320 px, ya sea reubicándolo en una vista de una sola columna, o mediante alguna interacción que ofrezca la información de otra manera, por ejemplo, en un área desplegable, en un diálogo o a través de un enlace a otra vista.
Ejemplos
Los siguientes ejemplos muestran el fallo de no hacer que el contenido visible con un ancho de ventana gráfica mayor esté también disponible tras un reajuste a 320 px:
- Un bloque de enlaces a entradas del blog situado en una columna lateral desaparece por completo tras el reajuste (es decir, no está disponible más abajo en la vista de una sola columna).
- Las etiquetas situadas sobre los campos de texto se ocultan y se sustituyen por texto de marcador (placeholder) tras el reajuste, sin una técnica que muestre etiquetas específicas al dar el foco a los campos.
- Secciones de texto del contenido desaparecen tras el reajuste, sin que estén disponibles a través de algún componente desplegable.
- Imágenes que aportan información desaparecen tras el reajuste, sin un enlace ni la disponibilidad de una alternativa equivalente.
- Un campo de búsqueda global desaparece tras el reajuste, sin un icono ni una opción de menú que muestre una función de búsqueda o permita llegar a una página de búsqueda equivalente.
Pruebas
Procedimiento
- Revisar los elementos de contenido visibles con un ancho de ventana gráfica de escritorio, por ejemplo 1280 px.
- Establecer el ancho de la ventana gráfica en 320 px estrechando la ventana del navegador, o ampliando el zoom de forma que el ancho de la ventana gráfica pase a ser de 320 px (si se parte de un ancho de ventana gráfica de 1280 px con un zoom del navegador del 100 %, esto se consigue ampliando el zoom al 400 %).
- Para cada elemento de contenido que no se ofrece con el ancho de ventana gráfica de 320 px, comprobar que existe una forma de llegar al mismo contenido o a uno equivalente mediante componentes desplegables, ventanas emergentes o enlaces a otras vistas.
Resultados esperados
- Si la comprobación n.º 3 es falsa, entonces se da esta condición de fallo y el contenido falla este criterio de conformidad.
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 F102 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.