Secuencia significativa
Cuando el orden de lectura del contenido es relevante para su comprensión, el orden del DOM debe coincidir con el orden visual. El posicionamiento CSS y el uso de float que alteran la secuencia perjudican a los lectores de pantalla y a la navegación por teclado.
Qué exige
Si el significado del contenido depende del orden en que se lee —instrucciones, narrativa, un proceso paso a paso—, ese orden debe preservarse en el DOM. Los lectores de pantalla y los motores de reflujo recorren el documento siguiendo el orden del código fuente; si el uso de order en CSS, position: absolute, flex-direction: row-reverse o la ubicación en cuadrícula altera el orden visual respecto al orden del DOM, la experiencia se deteriora.
Cómo cumplirlo
- Escribir el DOM en el orden en que debe leerse el contenido; usar CSS para posicionar visualmente, no para inventar la secuencia.
- Revisar cualquier uso de
flex-direction: row-reverse,orderen CSS ogrid-areaque desplace el contenido fuera de su posición en el código fuente. - En diseños multicolumna, colocar las columnas en el DOM según el orden de lectura, no según el orden visual de las columnas.
- Probar desactivando CSS (herramientas de desarrollo del navegador, «ver orden del código»): el flujo sin estilos debe seguir teniendo sentido.
- Ejecutar la página en un lector de pantalla y detectar cualquier momento en que el orden de anuncio resulte sorprendente.
Errores habituales
- Una barra lateral visualmente a la derecha pero colocada en primer lugar en el DOM: los lectores de pantalla presentan anuncios, enlaces relacionados y llamadas a la acción antes del artículo principal.
flex-direction: row-reverseen un menú de navegación: los usuarios con visión ven Inicio / Acerca de / Contacto, mientras que los lectores de pantalla escuchan Contacto / Acerca de / Inicio.orderen CSS reorganiza los campos del formulario de forma diferente al orden del DOM, lo que hace que la tabulación salte de manera imprevisible.- El enlace «Ir al contenido» colocado después de la navegación en el DOM pero posicionado absolutamente en la parte superior de forma visual: los usuarios de teclado pasan primero por la navegación.
- Tarjetas en una cuadrícula que fluyen visualmente de izquierda a derecha pero están colocadas en el DOM de abajo a arriba debido a un truco de cuadrícula.
Por qué importa
Los fallos de secuencia significativa son engañosos: la página tiene buen aspecto, supera la validación y pasa la mayoría de las comprobaciones automatizadas. Solo se detectan cuando una persona que usa un lector de pantalla intenta leer la página de arriba a abajo. La mayoría de las correcciones son pequeños reordenamientos del DOM, pero el coste de diagnóstico para identificar el problema es elevado.