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
 
(No se muestra una edición intermedia del mismo usuario)
Línea 1: Línea 1:
== '''1.3.2-A. Orden lógico de lectura''' ==
{{CriterioWCAG
<!-- 
|id_wcag_criterio=1.3.2
  Análisis interno:
|id_wcag_subcriterio=1.3.2-A
  Este criterio impacta principalmente a: Personas con discapacidad visual total 
|wcag_titulo_criterio=1.3.2-A. Orden lógico de lectura
  Problema grave: Si el orden de lectura en el código no coincide con la presentación visual, los lectores de pantalla transmiten información desordenada, afectando comprensión. 
|wcag_nivel=A
-->
|wcag_version=2.0
<html>
|wcag_principio=1_Perceptible
<!-- criterio 1.3.2-A -->
|wcag_principio_url=Principio_1
<article class="wcag-card">
|wcag_pauta=1.3_Adaptable
  <section class="wcag-info">
|wcag_pauta_url=Principio_1/1.3_Adaptable
    <ul>
|wcag_grupo=Estructura
      <li><span class="label">Nivel:</span><span class="value">A</span></li>
|wcag_subgrupo=Orden de lectura
      <li><span class="label">Versión:</span><span class="value">2.2</span></li>
      <li><span class="label">Principio:</span><span class="value">1. Perceptible</span></li>
      <li><span class="label">Pauta:</span><span class="value">1.3 Crear contenido adaptable</span></li>
      <li><span class="label">Categoría:</span><span class="value">Estructura</span></li>
      <li><span class="label">Subcategoría:</span><span class="value">Orden de lectura</span></li>
    </ul>
  </section>


   <section class="wcag-users">
|wcag_discapacidades=
    <p>Usuarios más afectados</p>
<li class="discapacidad-item">
    <ul>
  [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
      <li><img src="/images/4/4d/Sinvision.png" alt="Icono de una persona con discapacidad visual" /> Personas con discapacidad visual total - <span class="gravedad">Barrera grave</span></li>
   <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> –
      <li><img src="/images/b/b7/Bajavision.png" alt="Icono baja visión" class="icono-discapacidad" /> Personas con baja visión – <span class="gravedad">Barrera moderada</span></li>
  <span class="gravedad gravedad-grave">Barrera grave</span>
    </ul>
</li>
  </section>
 
</article>
|wcag_lista_discapacidades=
</html>
[[Categoría:Discapacidad visual total]]
 
|wcag_texto_criterioOAW=
El orden de lectura del contenido en el código de la página debe tener sentido
 
|wcag_descripcion_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.
 
|wcag_objetivo=
Garantizar que la estructura narrativa y funcional del contenido se mantenga independientemente de la presentación visual, permitiendo una lectura natural y comprensible.
 
|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.
 
|wcag_referencias=
 
<ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G57 G57: Ordering the content in a meaningful sequence]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/css/C6 C6: Positioning content based on structural markup]</span></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>
 
|wcag_recursos=
<strong> Consejos </strong>
<ul>
<li>Hacer que el orden del DOM coincida con el orden visual</li>
<li>Evitar reordenamientos CSS que alteren el flujo lógico</li>
<li>Usar marcado estructural coherente para narrativas y formularios</li>
</ul>
 
|wcag_tipo_evaluacion=Semiautomática
 
|wcag_pasos_evaluacion=
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi Heading Maps].'''
 
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span>
Seleccionar <strong>Miscellaneous – Linearize page</strong>.
</li>
<li><span class="paso-badge">Paso 2.</span>  
Verificar que el orden de lectura es el adecuado.
</li>
</ol>
 
|wcag_resultado_evaluacion=
El contenido se presenta en un orden lógico dentro del DOM, permitiendo una comprensión secuencial adecuada.
 
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
El contenido sigue un orden lógico de lectura en el código y visualmente.
<pre class="wcag-codigo-html">
<header>Menú principal</header>
<p>Contenido principal</p>
<footer>© 2025</footer>
</pre>
</div>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<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>'''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>
}}

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»