Principio 1/1.3 Adaptable/1.3.2-A

1.3.2-A. Orden lógico de lectura

1_Perceptible 1.3_Adaptable

• Nivel: A
• Versión: 2.0
• Principio: 1_Perceptible
• Pauta: 1.3_Adaptable
• Grupo: Estructura
• Subgrupo: Orden de lectura

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

• Visual total – Barrera grave

Enunciado del criterio (Observatorio de Accesibilidad Web)

• El orden de lectura del contenido en el código de la página debe tener sentido

Comprensión del criterio

Descripción resumida

El contenido debe aparecer en el código en un orden lógico y coherente, de modo que al ser linealizado o leído por tecnologías de apoyo, la secuencia mantenga el significado y la comprensión.

Objetivo

Garantizar que la estructura narrativa y funcional del contenido se mantenga independientemente de la presentación visual, permitiendo una lectura natural y comprensible.

Importancia de cumplir el criterio

Los lectores de pantalla leen el contenido en el orden que aparece en el DOM. Si el orden visual y el orden en el código no coinciden, la comprensión se ve afectada y la experiencia se vuelve confusa o incoherente.

Referencias WCAG

• G57: Ordering the content in a meaningful sequence
• C6: Positioning content based on structural markup
• C27: Making the DOM order match the visual order
• F1: Failure due to changing the meaning of content by positioning information with CSS

Recursos de apoyo

Consejos

• Hacer que el orden del DOM coincida con el orden visual
• Evitar reordenamientos CSS que alteren el flujo lógico
• Usar marcado estructural coherente para narrativas y formularios

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática

Procedimiento de evaluación

Usa la herramienta de Heading Maps.

1. Paso 1. Seleccionar Miscellaneous – Linearize page.
2. Paso 2. Verificar que el orden de lectura es el adecuado.

Resultado esperado

El contenido se presenta en un orden lógico dentro del DOM, permitiendo una comprensión secuencial adecuada.

Ejemplo

El contenido sigue un orden lógico de lectura en el código y visualmente.

<header>Menú principal</header>
<p>Contenido principal</p>
<footer>© 2025</footer>

Otras herramientas de evaluación

• Inspección del navegador: revisar el árbol DOM y el orden real del contenido en el código, asegurando que coincide con el flujo visual.
• Navegación con teclado: recorrer la página con la tecla Tab y comprobar que el foco sigue un orden lógico y coherente.
• Lectores de pantalla: (NVDA, JAWS, VoiceOver) escuchar la lectura secuencial para confirmar que la narrativa es comprensible y coincide con la presentación.
• Simulación sin CSS: desactivar estilos en herramientas del navegador para verificar que el contenido linealizado mantiene sentido.

Comentarios

A continuación se muestran comentarios sobre el criterio 1.3.2-A. Orden lógico de lectura

Loading comments...