Principio 1/1.3 Adaptable/1.3.2-A

De WCAG Wiki

1.3.2-A. Orden lógico de lectura

Discapacidades afectadas

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

Enunciado del criterio (Observatorio de Accesibilidad Web)

  • Cuando la secuencia en que se presenta el contenido afecta a su significado, se puede determinar por software la secuencia correcta de lectura.

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 – Ordenar el contenido en una secuencia significativa
  • C27 – Hacer coincidir el orden del DOM con el orden visual
  • G59 – Situar los elementos interactivos siguiendo la secuencia lógica

Recursos de apoyo

  • 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

  1. Usar “Linearize Page” en Web Developer Toolbar
  2. Leer el contenido de forma lineal
  3. Verificar que el significado se preserva en el orden presentado

Resultado esperado

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

Ejemplo

Ejemplo correcto:
<label for="nombre">Nombre</label>
<input id="nombre" type="text">

Ejemplo incorrecto:

<input id="nombre" type="text">
<label for="nombre">Nombre</label>

Otras herramientas de evaluación

  • Web Developer Toolbar – Linearize Page
  • Lectores de pantalla










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

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

Loading comments...