Layout, consistencia (3.2.3, 3.2.4, 3.2.6) y diseño responsive

Una interfaz predecible es una interfaz accesible. Cuando el menú está siempre en el mismo sitio, el icono de búsqueda significa siempre lo mismo y el enlace de contacto aparece en el mismo lugar en todas las páginas, una persona con discapacidad cognitiva, con baja visión o que usa lector de pantalla construye un modelo mental del sitio y lo reutiliza. Esta lección trata los criterios de coherencia del principio «Comprensible» y las bases del diseño responsive que hacen que la interfaz funcione en cualquier pantalla.

Coherencia entre páginas

3.2.3 Navegación coherente (AA)

Los mecanismos de navegación que se repiten en varias páginas (menú principal, enlaces de pie, buscador, migas de pan) deben aparecer en el mismo orden relativo cada vez, salvo que la persona usuaria inicie el cambio. No obliga a que estén en la misma posición exacta ni a que todos los elementos estén presentes en todas las páginas; lo que no puede cambiar es el orden entre ellos. Un menú con «Inicio, Servicios, Contacto» en la portada y «Servicios, Inicio, Contacto» en el interior incumple.

3.2.4 Identificación coherente (AA)

Los componentes con la misma función se identifican de forma coherente en todo el sitio: mismo nombre, mismo icono, mismo texto alternativo. Si el icono de la lupa es «Buscar» en la cabecera, no puede ser «Encontrar» en el pie. Si el botón de descargar un PDF se llama «Descargar» en una página, no debe ser «Obtener» en otra. Esto afecta de lleno al diseño: un sistema de componentes con nombres fijos es la mejor garantía.

3.2.6 Ayuda coherente (A)

Nuevo en WCAG 2.2. Si una web ofrece algún mecanismo de ayuda (datos de contacto humano como teléfono o correo, un mecanismo de contacto humano como un chat o formulario, una opción de autoayuda como preguntas frecuentes, o un mecanismo automatizado como un chatbot), ese mecanismo debe aparecer en el mismo orden relativo respecto al resto del contenido en todas las páginas del conjunto donde esté presente. El objetivo es que quien necesita ayuda sepa dónde buscarla. No obliga a ofrecer ayuda; obliga a ser coherente si se ofrece.

3.2.1 y 3.2.2: sin cambios de contexto inesperados

Dos criterios de nivel A completan la predictibilidad: nada cambia de contexto (nueva ventana, otra página, foco movido) solo por recibir el foco (3.2.1 Al recibir el foco) ni solo por cambiar el valor de un control (3.2.2 Al recibir entradas) sin avisar antes. El desplegable «elige tu provincia» que navega a otra página al seleccionar incumple 3.2.2: toda acción que cambia de página necesita un control explícito.

Layout accesible

• Regiones claras: cabecera, navegación, contenido principal, contenido complementario y pie, bien delimitados visualmente. En código se convertirán en landmarks (header, nav, main, aside, footer) que el lector de pantalla usa para saltar entre zonas.
• Orden visual = orden de lectura. El contenido se lee en el orden del código (1.3.2 Secuencia significativa). Si el diseño coloca algo visualmente antes pero en el código va después, la persona que no ve la pantalla recibe la información desordenada. Diseña de arriba abajo y de izquierda a derecha, y evita reordenar con CSS.
• Una acción principal por pantalla y espacio en blanco suficiente entre bloques y elementos interactivos.
• Jerarquía visual que coincida con la semántica: si algo parece un título de nivel 2, será un h2; si parece un botón, será un botón. No diseñes «enlaces que parecen botones» sin decidir qué son.

Diseño responsive y accesibilidad

El diseño responsive no es solo que la web «se vea bien en el móvil». Es la base de 1.4.10 Reajuste de los elementos (que el contenido se adapte a 320 px CSS sin desplazamiento horizontal) y de 1.4.4 Cambio de tamaño del texto. Principios de diseño:

• Diseña primero la versión estrecha (mobile first): si funciona a 320 px, funcionará con zoom al 400 % en escritorio, que es como la usan muchas personas con baja visión.
• Nunca recortes funciones en la versión móvil. Lo que se puede hacer en escritorio se tiene que poder hacer en móvil; de lo contrario, quien usa zoom al 400 % pierde funciones.
• Orientación libre. El criterio 1.3.4 Orientación (AA) exige que el contenido no se limite a vertical u horizontal, salvo que sea esencial (un piano virtual, un cheque escaneado). Muchas personas tienen el móvil o la tableta fijados en un soporte de silla de ruedas y no pueden girarlo.
• Cuidado con los elementos fijos. Cabeceras pegajosas, banners de cookies, botones de chat: al 400 % pueden ocupar toda la pantalla. Diseña versiones mínimas o que se puedan cerrar.
• Tablas de datos: desplazamiento horizontal dentro de la tabla, sin perder la relación entre encabezados y datos.
• Menús colapsados («hamburguesa»): aceptables, pero el botón debe tener nombre («Menú»), indicar su estado (abierto/cerrado) y ser operable con teclado.

Resumen

• 3.2.3 Navegación coherente y 3.2.4 Identificación coherente (AA): mismo orden relativo y mismos nombres para los mismos componentes en todo el sitio.
• 3.2.6 Ayuda coherente (A, nuevo en 2.2): los mecanismos de ayuda en la misma posición relativa en todas las páginas.
• 3.2.1 y 3.2.2: sin cambios de contexto al recibir foco o al cambiar un valor; toda navegación necesita un control explícito.
• Layout con regiones claras, orden visual igual al orden de lectura y jerarquía visual coherente con la semántica.
• Responsive de verdad: mobile first, sin perder funciones, orientación libre (1.3.4), elementos fijos controlados.