Diferencia entre revisiones de «Principio 1/1.3 Adaptable/1.3.2-A»

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
Línea 4: Línea 4:
|wcag_titulo_criterio=1.3.2-A. Orden lógico de lectura
|wcag_titulo_criterio=1.3.2-A. Orden lógico de lectura
|wcag_nivel=A
|wcag_nivel=A
|wcag_version=2.2
|wcag_version=2.0
|wcag_principio=1_Perceptible
|wcag_principio=1_Perceptible
|wcag_principio_url=Principio_1
|wcag_principio_url=Principio_1
Línea 17: Línea 17:
   <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> –
   <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> –
   <span class="gravedad gravedad-grave">Barrera grave</span>
   <span class="gravedad gravedad-grave">Barrera grave</span>
</li>
<li class="discapacidad-item">
  [[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Baja visión]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad baja visión|Baja visión]]</span> –
  <span class="gravedad gravedad-moderada">Barrera moderada</span>
</li>
</li>


|wcag_lista_discapacidades=
|wcag_lista_discapacidades=
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad visual total]]
[[Categoría:Discapacidad baja visión]]


|wcag_texto_criterioOAW=
|wcag_texto_criterioOAW=
Cuando la secuencia en que se presenta el contenido afecta a su significado, se puede determinar por software la secuencia correcta de lectura.
El orden de lectura del contenido en el código de la página debe tener sentido


|wcag_descripcion_resumida=
|wcag_descripcion_resumida=
Línea 38: Línea 32:


|wcag_importancia=
|wcag_importancia=
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.
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.


|wcag_referencias=
|wcag_referencias=
<ul>
<ul>
<li>G57 – Ordenar el contenido en una secuencia significativa</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G57 G57: Ordering the content in a meaningful sequence]</span></li>
<li>C27 – Hacer coincidir el orden del DOM con el orden visual</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/css/C6 C6: Positioning content based on structural markup]</span></li>
<li>G59 – Situar los elementos interactivos siguiendo la secuencia lógica</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/css/C27 C27: Making the DOM order match the visual order]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/failures/F1 F1: Failure due to changing the meaning of content by positioning information with CSS]</span></li>
</ul>
</ul>


|wcag_recursos=
|wcag_recursos=
<strong> Consejos </strong>
<ul>
<ul>
<li>Hacer que el orden del DOM coincida con el orden visual</li>
<li>Hacer que el orden del DOM coincida con el orden visual</li>
Línea 57: Línea 56:


|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi Heading Maps].'''
<ol class="paso-list">
<ol class="paso-list">
<li>Usar “Linearize Page” en Web Developer Toolbar</li>
<li><span class="paso-badge">Paso 1.</span>  
<li>Leer el contenido de forma lineal</li>
Seleccionar <strong>Miscellaneous – Linearize page</strong>.
<li>Verificar que el significado se preserva en el orden presentado</li>
</li>
<li><span class="paso-badge">Paso 2.</span>
Verificar que el orden de lectura es el adecuado.
</li>
</ol>
</ol>


Línea 67: Línea 71:


|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
Ejemplo correcto:
<div class="accessibility-card">
El contenido sigue un orden lógico de lectura en el código y visualmente.
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<label for="nombre">Nombre</label>
<header>Menú principal</header>
<input id="nombre" type="text">
<p>Contenido principal</p>
</pre>
<footer>© 2025</footer>
 
Ejemplo incorrecto:
<pre class="wcag-codigo-html">
<input id="nombre" type="text">
<label for="nombre">Nombre</label>
</pre>
</pre>
</div>


|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>Web Developer Toolbar – Linearize Page</li>
<li>'''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.</li>
<li>Lectores de pantalla</li>
<li>'''Navegación con teclado''': recorrer la página con la tecla <kbd>Tab</kbd> y comprobar que el foco sigue un orden lógico y coherente.</li>
<li>'''Lectores de pantalla''': (NVDA, JAWS, VoiceOver) escuchar la lectura secuencial para confirmar que la narrativa es comprensible y coincide con la presentación.</li>
<li>'''Simulación sin CSS''': desactivar estilos en herramientas del navegador para verificar que el contenido linealizado mantiene sentido.</li>
</ul>
</ul>
}}
}}

Revisión actual - 09:10 5 nov 2025

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)

  • 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

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.










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...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.3_Adaptable/1.3.2-A&oldid=3421»