¿Qué es un diseño accesible en la web y en dispositivos móviles?

¿Qué es un diseño accesible?

Un diseño accesible es una estructura de página o pantalla que las personas pueden leer, recorrer y manejar sea cual sea su capacidad, dispositivo o configuración. El contenido sigue un orden lógico, nada se rompe con mucho zoom o en una pantalla pequeña y los controles son lo bastante grandes para pulsarlos. Forma parte de las WCAG, el estándar al que remiten la mayoría de leyes y licitaciones.

Cómo funciona un diseño accesible

Se apoya en los principios POUR: perceptible, operable, comprensible y robusto.

• Estructura en el HTML, no solo en el CSS. Usa regiones (header, nav, main, footer) y una jerarquía real de encabezados para que quien use un lector de pantalla pueda saltar por la página. Añade ARIA solo cuando los elementos nativos no basten.
• El orden de lectura y de foco sigue el orden visual. El tabulador debe recorrer la página como lo haría la vista, véase el orden de navegación con teclado. CSS grid o flexbox pueden romperlo sin que se note.
• Reflujo. WCAG 2.2, criterio 1.4.10 (nivel AA): el contenido debe poder presentarse con un ancho de 320 píxeles CSS (y 256 de alto si el desplazamiento es horizontal) sin pérdida de información y sin desplazamiento en dos dimensiones, salvo partes que necesiten diseño bidimensional, como mapas o tablas de datos.
• Texto redimensionable. Criterio 1.4.4 (AA): el texto debe poder ampliarse hasta el 200 por ciento sin tecnología de apoyo y sin perder contenido ni funciones.
• Orientación. Criterio 1.3.4 (AA): el contenido no debe limitarse a vertical u horizontal, salvo que una orientación concreta sea esencial.
• Tamaño del objetivo. Criterio 2.5.8 (AA, nuevo en WCAG 2.2): mínimo de 24 por 24 píxeles CSS para objetivos de puntero, con excepciones por separación suficiente, enlaces dentro de un texto, controles equivalentes y elementos controlados por el navegador.

Ejemplo

Una tienda muestra una cuadrícula de productos con una barra lateral de filtros. A 320 píxeles CSS de ancho la barra pasa a ser un botón "Filtros" sobre la cuadrícula, esta pasa a una columna y la página solo se desplaza en vertical. El orden de tabulación es cabecera, filtros, productos, pie. Con zoom al 200 por ciento, el precio y el botón "Añadir al carrito" siguen visibles y pulsables.

Errores habituales

• Contenedores de ancho fijo y tamaños de fuente en píxeles que obligan a desplazar de lado al ampliar.
• Usar order de CSS, posicionamiento absoluto o tabindex mayor que 0 de modo que el foco no coincide con lo que se ve.
• Botones solo con icono y enlaces apretados de menos de 24 por 24 píxeles CSS.
• Elegir encabezados por su tamaño y no por su nivel.
• Bloquear una app a una orientación sin motivo esencial.

Diseño, pruebas y monitorización

Un diseño se rompe fácilmente en una versión nueva, así que compruébalo en viewports reales y de forma continua. Un enfoque mobile first suele dar buen reflujo. Las herramientas automáticas solo detectan una parte y no saben si el orden tiene sentido, por eso conviene una revisión manual con teclado y zoom. La monitorización de velocidad de LoadFocus ejecuta auditorías Lighthouse programadas desde 25 regiones en la nube y sigue una puntuación de Accesibilidad junto al rendimiento. Más en por qué las pruebas de rendimiento deben incluir accesibilidad (en inglés).

Preguntas frecuentes sobre el diseño accesible

¿Qué significa reflujo en las WCAG?

Que el contenido se adapta a un viewport estrecho de 320 píxeles CSS de ancho sin pérdida de información y sin desplazarse a la vez en vertical y horizontal. Mapas, tablas de datos y contenido similar que necesita dos dimensiones quedan exentos.

¿Un diseño responsive es accesible por sí solo?

No. El diseño responsive resuelve el tamaño de pantalla, pero la accesibilidad exige además un orden lógico de lectura y foco, objetivos táctiles usables, texto ampliable y encabezados y regiones con sentido.

¿De qué tamaño deben ser los objetivos táctiles?

WCAG 2.2, criterio 2.5.8, fija un mínimo de 24 por 24 píxeles CSS, con excepciones como una separación suficiente o enlaces dentro de una frase. En el móvil conviene ir más grande.

¿Puedo bloquear mi app en vertical?

Solo si una orientación concreta es esencial (WCAG 1.3.4). Si no, admite ambas, porque hay personas que fijan el dispositivo en un soporte.

¿Qué nivel WCAG debe cumplir un diseño?

Reflujo, tamaño del texto, orientación y tamaño del objetivo son nivel AA, el que piden la mayoría de leyes y contratos.