1.3.2 Secuencia significativa
Criterio de éxito oficial
Cuando la secuencia en que se presenta el contenido afecta su significado, se puede determinar programáticamente una secuencia de lectura correcta.
Puntos clave
Solo es necesario proporcionar un orden lineal específico cuando afecta el significado. Puede haber más de un orden «correcto», y solo es necesario proporcionar uno. El orden relativo de secciones independientes (como la barra lateral y el contenido principal) a menudo no afecta al significado.
¿Qué es?
El contenido web se puede reordenar y estilizar visualmente con CSS, pero CSS no modifica el HTML subyacente. El contenido del HTML permanece en su orden original y es el que utiliza la tecnología de asistencia. Si el orden visual difiere del orden del DOM y esa secuencia es significativa, los usuarios de tecnología de asistencia recibirán la información en el orden equivocado.
Imagina que es como leer un libro con todos los capítulos desordenados, o seguir una receta con los pasos dispersos por la página.
¿Por qué es importante?
Cuando el contenido secuencial de una página no está estructurado linealmente o no sigue un orden coherente, resulta inútil para los usuarios que no perciben la información visualmente. La tecnología de asistencia desorientará y confundirá a los usuarios que intentan navegar por información presentada en una secuencia incorrecta.
¿Quién se ve afectado?
Personas con discapacidad visual — Usan lectores de pantalla que leen el contenido en el orden del DOM. Si el DOM no refleja el orden lógico, reciben la información desordenada y pierden el significado.
Personas con dificultades cognitivas o de aprendizaje — Un orden lógico y predecible facilita la comprensión. El desorden en la presentación puede causar confusión y frustración.
Cómo implementar 1.3.2
Revisar el contenido en su orden lineal
La mejor forma de verificar el cumplimiento es eliminar los estilos CSS de la página y comprobar que el contenido sigue teniendo sentido en su orden natural del DOM.
Contenido que requiere secuencia
- Listas numeradas y pasos de instrucciones
- Tutoriales paso a paso
- Letras dentro de palabras y palabras dentro de oraciones
- Tablas de datos
- Campos de formulario con sus etiquetas
- Encabezados y sus párrafos correspondientes
Contenido donde el orden no importa
- Listas desordenadas (viñetas)
- Orden relativo entre secciones independientes (sidebar vs. contenido principal)
- Dos artículos independientes en la misma página
Hacer que el DOM coincida con el orden visual
La técnica más directa es asegurar que el orden de los elementos en el HTML refleje el orden visual de lectura.
CSS no modifica el DOM
Propiedades como float, flexbox order, grid o position: absolute pueden reordenar visualmente los elementos, pero el lector de pantalla sigue leyendo en el orden del DOM. Si usas estas técnicas, verifica que el orden del HTML siga siendo lógico.
Problema del espacio en blanco
El espacio en blanco usado estéticamente entre letras puede romper la secuencia. Observa cómo un lector de pantalla interpreta letras separadas por espacios:
Problema del espacio en blanco
Lo que ves visualmente
Lo que lee el lector de pantalla:
Welcome
Cada letra se lee por separado
En lugar de espaciar letras con caracteres de espacio, usa la propiedad CSS letter-spacing:
/* Correcto: efecto visual sin romper la lectura */
h1 { letter-spacing: 0.5em; }Ejemplos prácticos
Columnas Documento de varias columnas
En un documento con múltiples columnas, la presentación lineal del contenido fluye desde la parte superior de una columna hasta la parte inferior, y luego hasta la parte superior de la siguiente columna. El HTML refleja este orden natural de lectura.
CSS Secciones posicionadas con CSS
Se utiliza CSS para posicionar una barra de navegación, la historia principal y una historia secundaria en una página. El significado de la página no depende del orden de estas secciones independientes, por lo que cumple con el criterio.
Receta Pasos de una receta dispersos
Una página web de cocina muestra los pasos de una receta dispersos entre el contenido principal y la barra lateral. Los pasos deben estar agrupados en orden secuencial en el DOM para que un lector de pantalla pueda seguirlos correctamente. Esto incumple el criterio.
Texto Palabras con espacios entre letras
Un encabezado usa <h1>W e l c o m e</h1> con espacios entre letras por estética. Un lector de pantalla lo lee como siete letras separadas. La solución es usar letter-spacing en CSS.
Técnicas recomendadas
| Código | Técnica | Aplicación |
|---|---|---|
| G57 | Ordenar el contenido en una secuencia significativa en el HTML | General |
| C27 | Hacer que el orden del DOM coincida con el orden visual | CSS |
| C8 | Uso de letter-spacing CSS para controlar el espaciado dentro de una palabra | CSS |
| H34 | Uso de marcas Unicode RLM/LRM para texto bidireccional | Bidireccional |
| PDF3 | Garantizar el orden correcto de tabulación y lectura en documentos PDF |