WCAG 1.3.2: Secuencia con significado

Qué significa esta regla

El Criterio de Éxito 1.3.2 de las WCAG — Secuencia significativa (Nivel A) establece: «Si la secuencia en la que se presenta el contenido afecta a su significado, debe poder determinarse mediante programación una secuencia de lectura correcta.» En términos sencillos, si el orden visual del contenido de tu página tiene significado — pasos de un proceso, un hilo de conversación, una etiqueta de formulario emparejada con su campo, una lista numerada — entonces el orden subyacente en el DOM debe reflejar esa misma secuencia para que las tecnologías de apoyo puedan exponerlo correctamente.

La frase clave es «si la secuencia afecta a su significado». No todas las decisiones de orden en una página están cubiertas. Las listas decorativas de logotipos no relacionados, por ejemplo, no tienen un significado secuencial. Pero cualquier contenido en el que reordenar cambie lo que una persona entiende — la lista de ingredientes de una receta seguida de las instrucciones, una tabla de precios asociada a productos, un flujo de compra en varios pasos — debe tener absolutamente un orden en el DOM que coincida con el orden visual significativo.

Qué cuenta como un aprobado: El orden de origen en el DOM coincide con el orden lógico de lectura, O una transformación (como CSS que reordena la presentación visual) sigue permitiendo que las tecnologías de apoyo determinen correctamente la secuencia de lectura programática. Los lectores de pantalla que leen directamente el DOM deben seguir encontrando el contenido en el orden significativo correcto incluso cuando la posición visual mediante CSS difiere del orden en el DOM.

Qué cuenta como un fallo: Usar técnicas CSS — position: absolute, la propiedad order de CSS Grid, la propiedad order de CSS Flexbox o el diseño multicolumna de CSS — para reordenar visualmente el contenido de modo que la secuencia visual transmita un significado que el orden en el DOM no refleja. Un ejemplo clásico es una barra lateral colocada antes del contenido principal en el DOM pero renderizada visualmente después, donde la barra lateral contiene notas contextuales que solo tienen sentido después de leer el texto principal.

La especificación de las WCAG señala explícitamente una excepción: cuando una secuencia no es significativa, no es necesario que pueda determinarse mediante programación. Además, el criterio se centra en que se pueda determinar una secuencia de lectura correcta, no en que los órdenes visual y del DOM deban ser siempre idénticos: CSS puede reordenar visualmente siempre que la secuencia expuesta a las tecnologías de apoyo siga siendo significativa. Sin embargo, en la práctica, el reordenamiento solo con CSS rompe con frecuencia la secuencia para las tecnologías de apoyo y debe tratarse con mucho cuidado.

Por qué es importante

Las personas usuarias de lectores de pantalla son el grupo más directamente afectado. Aproximadamente 7,5 millones de personas en Estados Unidos usan software lector de pantalla y, a nivel global, la Organización Mundial de la Salud estima que 2,2 mil millones de personas tienen algún tipo de discapacidad visual. Para una persona ciega que navega por una página con NVDA, JAWS o VoiceOver, la experiencia de lectura está determinada por completo por la secuencia programática — específicamente el orden en el DOM. Si una persona desarrolladora usa la propiedad CSS order en un diseño Flexbox para mover un mensaje de advertencia visualmente por encima de un formulario, pero el DOM sitúa esa advertencia después de los campos del formulario, una persona usuaria de lector de pantalla completará el formulario antes de escuchar la advertencia. Esto no es una simple molestia; puede provocar errores, transacciones fallidas y exclusión de servicios críticos.

Las personas con discapacidades cognitivas también se benefician significativamente de una secuencia significativa. Las personas con dislexia, trastornos de atención o diferencias en el procesamiento a menudo dependen de un flujo de contenido lógico y predecible. Cuando la jerarquía de encabezados y los bloques de contenido aparecen en un orden desordenado en el DOM, incluso quienes pueden ver la página pueden tener dificultades si dependen del modo de lectura del navegador, herramientas de texto a voz o extensiones de visualización simplificada que eliminan el CSS y presentan el contenido bruto del DOM.

Las personas con discapacidad motriz que navegan con teclado o conmutadores se desplazan por los elementos interactivos en el orden del DOM mediante la tecla Tab. Si un botón de envío aparece antes que sus campos de formulario asociados en el DOM (pero después de ellos visualmente), la secuencia de tabulación se vuelve confusa y propensa a errores.

Un escenario concreto del mundo real: una página de pago de comercio electrónico turca usa un diseño CSS Grid donde la propiedad order mueve el panel de «Resumen del pedido» para que aparezca visualmente en el lado derecho, después del formulario de facturación. Sin embargo, en el DOM, el HTML del resumen del pedido aparece primero. Una persona usuaria de lector de pantalla escucha el precio total y la lista de artículos antes de escuchar el formulario de facturación — aún no tiene contexto de qué está pagando. Esto puede provocar abandono, confusión y quejas de accesibilidad. En virtud de las nuevas regulaciones de accesibilidad de Turquía, un fallo de este tipo en una plataforma comercial se convierte ahora en una responsabilidad regulatoria.

Más allá de la accesibilidad, una secuencia significativa en el DOM beneficia al SEO. Los rastreadores de motores de búsqueda leen el orden del DOM de forma similar a los lectores de pantalla. Un DOM bien estructurado que sitúa primero el contenido más significativo — encabezados, contenido principal, llamadas clave a la acción — puede influir positivamente en cómo se indexan y clasifican las páginas.

Reglas relacionadas de Axe-core

WCAG 1.3.2 se clasifica como un criterio que requiere pruebas manuales. Las herramientas automatizadas, incluido axe-core, no pueden señalar de forma fiable infracciones de secuencia porque hacerlo requeriría que la herramienta entendiera el significado del contenido — específicamente, si un determinado orden de contenido cambia su interpretación. Este es un juicio semántico que ningún analizador automatizado puede realizar de forma universal. Una herramienta automatizada puede detectar que se ha usado CSS para reordenar visualmente elementos, pero no puede determinar si ese reordenamiento es significativo o decorativo sin juicio humano.

• Revisión manual — orden visual CSS vs. orden en el DOM: Axe-core no tiene una regla automatizada dedicada para 1.3.2. Las personas evaluadoras deben comparar manualmente el renderizado visual de una página con su orden de origen en el DOM deshabilitando el CSS y observando si el contenido linealizado sigue teniendo sentido. Herramientas como el inspector de árbol de accesibilidad integrado en el navegador o el «Full Page Scan» de axe DevTools pueden mostrar anomalías estructurales, pero una persona debe juzgar si la secuencia es significativa.
• Revisión manual — propiedad order de CSS Flexbox y Grid: Cuando axe DevTools o las DevTools del navegador revelan elementos que usan la propiedad CSS order o position: absolute/fixed para elementos de contenido (no meramente decorativos), una persona evaluadora debe determinar si el orden visual diverge de forma significativa del orden en el DOM. Las herramientas automatizadas no señalarán esto como error por sí solas.
• Revisión manual — uso incorrecto de tablas de diseño: Las páginas que usan tablas HTML para diseño visual (en lugar de datos tabulares) pueden hacer que los lectores de pantalla lean las celdas en un orden del DOM que no coincide con el flujo de lectura previsto. Las herramientas automatizadas pueden señalar las tablas de diseño como un problema aparte, pero el impacto en la secuencia requiere verificación humana.

Cómo hacer las pruebas

1. Ejecuta primero un análisis automatizado: Usa axe DevTools (extensión del navegador) o Lighthouse en Chrome DevTools para realizar un análisis de accesibilidad de página completa. Aunque ninguna de las dos herramientas señalará directamente una infracción de 1.3.2, sí mostrarán problemas estructurales relacionados — tablas de diseño, orden incorrecto de encabezados o uso incorrecto de ARIA — que pueden indicar problemas de secuencia. Anota cualquier advertencia sobre orden visual o anomalías estructurales para una revisión manual posterior.
2. Deshabilita todo el CSS e inspecciona el contenido linealizado: En Firefox DevTools o Chrome DevTools, deshabilita todas las hojas de estilo (o usa la función «Disable All Styles» de la extensión Web Developer). Lee la página de arriba abajo. Pregunta: ¿el contenido sigue teniendo sentido en este orden? ¿Puedes seguir una historia, un formulario o un proceso sin confusión? Si el significado se rompe, es probable que la página incumpla 1.3.2.
3. Inspecciona directamente el orden de origen en el DOM: Abre las DevTools, ve al panel Elements/Inspector y lee el código HTML. Compara la posición en el DOM de cada bloque de contenido principal con su posición visual. Presta especial atención a los elementos que usan CSS Flexbox o Grid: busca la propiedad order en los estilos calculados y verifica que no cree una discrepancia significativa en la secuencia.
4. Haz pruebas con NVDA y Firefox: Inicia NVDA, abre Firefox y navega a la página. Pulsa Insert + Flecha abajo para activar el modo «Say All» y escucha toda la página de arriba abajo. Sigue visualmente y anota cualquier caso en el que el orden del contenido hablado no coincida con el orden visual significativo. Presta atención a las etiquetas y campos de formulario, listas numeradas, instrucciones paso a paso y contenido que hace referencia a contenido anterior.
5. Haz pruebas con VoiceOver y Safari (macOS/iOS): Activa VoiceOver (Command + F5 en macOS). Usa el rotor (Control + Opción + U) para navegar por encabezados o regiones, y usa Control + Opción + Flecha derecha para leer linealmente la página. Observa si el contenido fluye en un orden lógico y significativo. En iOS, desliza hacia la derecha para desplazarte por el contenido y verifica la integridad de la secuencia.
6. Haz pruebas con JAWS y Chrome: Abre JAWS con Chrome y usa el comando «Say All» Insert + Flecha abajo. Como con NVDA, sigue visualmente mientras escuchas y marca cualquier contenido que se presente fuera de un orden significativo. JAWS lee el árbol de accesibilidad, que en gran medida refleja el orden del DOM, lo que lo convierte en una prueba fiable para problemas de secuencia.
7. Prueba el orden de tabulación del teclado: Sin lector de pantalla, simplemente pulsa Tab repetidamente para recorrer todos los elementos interactivos de la página. La secuencia de enfoque debe seguir un recorrido lógico y significativo — generalmente de izquierda a derecha y de arriba abajo en escrituras latinas, coherente con cómo una persona vidente leería la página. Una secuencia de tabulación que salta de forma impredecible entre secciones indica un problema de orden en el DOM.

Cómo solucionarlo

Propiedad order de CSS Flexbox — Incorrecto

<!-- Visual order is: Warning, then Form. DOM order is reversed. -->
<div style='display: flex; flex-direction: column;'>
  <form style='order: 1;'>
    <label for='email'>Email</label>
    <input type='email' id='email' name='email' />
    <button type='submit'>Subscribe</button>
  </form>
  <div class='warning' style='order: 0;'>
    <p>Warning: You must be 18 or older to subscribe.</p>
  </div>
</div>

Propiedad order de CSS Flexbox — Correcto

<!-- DOM order now matches meaningful visual order: Warning first, then Form. -->
<!-- The CSS order property is removed; DOM sequence alone controls both visual and AT order. -->
<div style='display: flex; flex-direction: column;'>
  <div class='warning'>
    <p>Warning: You must be 18 or older to subscribe.</p>
  </div>
  <form>
    <label for='email'>Email</label>
    <input type='email' id='email' name='email' />
    <button type='submit'>Subscribe</button>
  </form>
</div>

Contenido posicionado absolutamente que crea una secuencia engañosa — Incorrecto

<!-- Step labels appear visually above the content boxes, but come after them in the DOM. -->
<div style='position: relative; height: 200px;'>
  <div style='position: absolute; top: 50px; left: 0;'>
    <p>Step 1: Fill in your personal details below.</p>
  </div>
  <div style='position: absolute; top: 0; left: 0;'>
    <p><strong>1</strong></p>
  </div>
</div>

Contenido posicionado absolutamente que crea una secuencia engañosa — Correcto

<!-- DOM order now reflects the meaningful reading sequence: label first, then number. -->
<!-- Absolute positioning is used only for visual refinement, not to reverse meaningful order. -->
<div style='position: relative; height: 200px;'>
  <div style='position: absolute; top: 0; left: 0;'>
    <p><strong>1</strong></p>
  </div>
  <div style='position: absolute; top: 50px; left: 0;'>
    <p>Step 1: Fill in your personal details below.</p>
  </div>
</div>

CSS Grid con áreas de contenido reordenadas — Incorrecto

<!-- Sidebar (contextual notes) appears visually on the right, after main content. -->
<!-- But in the DOM it comes first, so screen readers hear sidebar notes before the article. -->
<div class='layout'>
  <aside class='sidebar'>
    <p>Note: The statistics below are sourced from the 2024 annual report.</p>
  </aside>
  <main class='content'>
    <h1>Annual Sales Overview</h1>
    <p>Total revenue grew by 23% compared to the prior year...</p>
  </main>
</div>
<!--
.layout { display: grid; grid-template-columns: 3fr 1fr; }
.sidebar { grid-column: 2; }
.main { grid-column: 1; }
-->

CSS Grid con áreas de contenido reordenadas — Correcto

<!-- Main content comes first in the DOM, matching the meaningful reading order. -->
<!-- The sidebar, which annotates the main content, follows it in the DOM. -->
<!-- CSS Grid places the sidebar visually to the right without changing DOM sequence. -->
<div class='layout'>
  <main class='content'>
    <h1>Annual Sales Overview</h1>
    <p>Total revenue grew by 23% compared to the prior year...</p>
  </main>
  <aside class='sidebar'>
    <p>Note: The statistics above are sourced from the 2024 annual report.</p>
  </aside>
</div>
<!--
.layout { display: grid; grid-template-columns: 3fr 1fr; }
.content { grid-column: 1; }
.sidebar { grid-column: 2; }
-->

Errores comunes

• Usar la propiedad order de CSS Flexbox o Grid para reordenar visualmente bloques de contenido significativo sin actualizar el código fuente HTML — esta es la causa más común de fallos de 1.3.2 en el desarrollo web moderno. Ajusta siempre primero el orden en el DOM y usa CSS solo para refinar la presentación visual.
• Colocar el contenido principal de la página <main> después de un <nav> o <aside> en el DOM mientras se usa CSS para hacer que el contenido principal aparezca primero visualmente — los lectores de pantalla leerán la navegación o el contenido de la barra lateral antes del artículo principal, rompiendo la secuencia significativa.
• Construir diseños de estilo revista de varias columnas con columnas CSS o floats donde el orden del DOM recorre columna por columna de arriba abajo dentro de cada columna, pero el orden visual es fila por fila — las personas que esperan una lectura fila por fila (como en muchos diseños de contenido en cuadrícula) recibirán el contenido en la secuencia incorrecta.
• Usar position: absolute o position: fixed para llevar visualmente un resumen de errores de formulario a la parte superior de la página mientras el elemento de resumen de errores permanece al final del DOM — las personas usuarias de lectores de pantalla que envían un formulario no encontrarán el resumen de errores hasta llegar al final de la página, perdiéndose comentarios críticos.
• Renderizar instrucciones paso a paso o secuencias numeradas con reinicios de contadores CSS mientras el orden de los pasos en el DOM no coincide con el orden significativo — los números visuales pueden parecer correctos, pero la secuencia leída en voz alta será incorrecta.
• Insertar contenido dinámico (por ejemplo, mensajes de chat, elementos de un feed en vivo, notificaciones tipo toast) en la parte superior de un contenedor en el DOM cuando la convención visual muestra los elementos más recientes en la parte inferior — o viceversa — sin usar regiones ARIA en vivo o ajustar el DOM para que coincida con la secuencia significativa.
• Usar tablas HTML para diseño en lugar de datos tabulares y colocar las celdas en un orden del DOM que se lea por columnas en lugar de por filas — las tecnologías de apoyo leen las celdas de las tablas en el orden del DOM (fila por fila), por lo que las tablas de diseño construidas por columnas se leerán en la secuencia incorrecta.
• Confiar en JavaScript para ordenar o reordenar visualmente el contenido (por ejemplo, una lista de productos ordenable) sin actualizar el orden subyacente en el DOM — después de que una persona ordene por precio, el lector de pantalla puede seguir anunciando los elementos en el orden original sin ordenar si solo se actualizaron clases CSS o la posición visual.
• Colocar notas al pie o notas finales en el DOM inmediatamente después del párrafo que anotan cuando la presentación visual agrupa todas las notas al pie al final de la página — o al revés — sin garantizar que el orden expuesto a las tecnologías de apoyo sea significativo para el flujo de lectura previsto.
• Dividir una única unidad lógica de contenido en posiciones no adyacentes del DOM — por ejemplo, colocar el <figcaption> de una figura lejos de su elemento <figure> en el código fuente, haciendo que los lectores de pantalla anuncien el pie de figura fuera de contexto.

Relación con las regulaciones de accesibilidad de Turquía

La Circular Presidencial n.º 2025/10 de Turquía, publicada en el Boletín Oficial n.º 32933 el 21 de junio de 2025, establece requisitos obligatorios de accesibilidad web alineados con las WCAG 2.2. WCAG 1.3.2 Secuencia significativa es un criterio de Nivel A, por lo que forma parte del conjunto básico de requisitos que todas las entidades cubiertas deben cumplir.

La circular establece un calendario de cumplimiento por fases: las instituciones públicas deben lograr la conformidad en el plazo de un año desde la fecha de publicación de la circular, mientras que las entidades del sector privado disponen de dos años para cumplir.

Los siguientes tipos de entidades están explícitamente cubiertos por la circular y, por lo tanto, deben garantizar que todo el contenido digital e interfaces web presenten la información en una secuencia significativa determinable mediante programación:

• Instituciones públicas y organismos gubernamentales — todos los organismos gubernamentales centrales y locales, ministerios y organizaciones estatales afiliadas que operan sitios web o servicios digitales de cara al público.
• Bancos e instituciones financieras — incluidos portales de banca en línea, plataformas de inversión y sitios web de compañías de seguros donde el contenido secuencial (resúmenes de cuenta, solicitudes de préstamo paso a paso, historiales de transacciones) debe ser legible en el orden correcto por todas las personas usuarias.
• Plataformas de comercio electrónico — las listas de productos, los flujos de compra en varios pasos y las secuencias de confirmación de pedido deben tener órdenes en el DOM que reflejen correctamente su secuencia visual significativa, garantizando que las personas ciegas y con baja visión puedan completar compras sin confusión inducida por las tecnologías de apoyo.
• Hospitales y proveedores de atención sanitaria — portales de pacientes, sistemas de reserva de citas y páginas de información médica donde la secuencia de instrucciones, advertencias y campos de formulario tiene implicaciones directas para la seguridad.
• Empresas de telecomunicaciones con 200.000 o más abonados — páginas de comparación de servicios, interfaces de gestión de contratos y portales de soporte donde las tablas de tarifas y las listas de características deben presentarse en un orden significativo y programáticamente correcto.
• Agencias de viajes y empresas de transporte privado — los flujos de reserva, las visualizaciones de itinerarios y las interfaces de selección de asientos dependen en gran medida de la secuencia visual (salida antes que llegada, paso 1 antes que paso 2) que debe reflejarse correctamente en el DOM.
• Colegios privados autorizados por el Ministerio de Educación Nacional (MoNE) — los sistemas de gestión del aprendizaje, las páginas de contenido de cursos y los portales de inscripción deben presentar las secuencias educativas — lecciones, módulos, evaluaciones — en un orden determinable mediante programación para que el alumnado que usa tecnologías de apoyo pueda seguir correctamente el plan de estudios.

El incumplimiento de WCAG 1.3.2 en cualquiera de estas plataformas no es simplemente una brecha de buenas prácticas; en virtud de la circular 2025/10 constituye una no conformidad regulatoria sujeta a supervisión y requisitos de remediación. Dado que las infracciones de 1.3.2 surgen con frecuencia de técnicas modernas de diseño CSS (Flexbox, Grid) que son ubicuas en el desarrollo web turco, las organizaciones deberían priorizar una auditoría sistemática de sus patrones de diseño y prácticas de orden en el DOM como parte de su hoja de ruta de cumplimiento.