Diferencia entre revisiones de «Principio 3/3.2 Predecible/3.2.3-A»

De WCAG Wiki
Sin resumen de edición
Línea 1: Línea 1:
== '''3.2.3-A. Navegación coherente''' ==
{{CriterioWCAG
<!-
|id_wcag_criterio=3.2.3
  Análisis interno:
|id_wcag_subcriterio=3.2.3-A
  Impacta principalmente a: Personas con discapacidad cognitiva y visual (lectores de pantalla).
|wcag_titulo_criterio=3.2.3-A. Navegación coherente
  Problema moderado: Si los elementos de navegación cambian de orden o posición, los usuarios pueden confundirse o perder orientación.
|wcag_nivel=AA
  Gravedad: Barrera moderada, porque dificulta la previsibilidad, aunque no impide completamente el acceso.
|wcag_version=2.0
-->
|wcag_principio=3_Comprensible
<html>
|wcag_principio_url=Principio_3
<!-- criterio 3.2.3-A -->
|wcag_pauta=3.2_Predecible
<article class="wcag-card">
|wcag_pauta_url=Principio_3/3.2_Predecible
  <section class="wcag-info">
|wcag_grupo=Consistencia
    <ul>
|wcag_subgrupo=Navegacion
      <li><span class="label">Nivel:</span><span class="value">AA</span></li>
|wcag_subcriterio_url=Principio_3/3.2_Predecible/3.2.3-A
      <li><span class="label">Versión:</span><span class="value">2.2</span></li>
 
      <li><span class="label">Principio:</span><span class="value">3. Comprensible</span></li>
|wcag_texto_criterioOAW=
      <li><span class="label">Pauta:</span><span class="value">3.2 El sistema debe ser operable y previsible en diferentes formas</span></li>
Los enlaces y mecanismos de navegación que se repiten en un sitio web deben aparecer siempre en el mismo orden relativo.
      <li><span class="label">Categoría:</span><span class="value">Diseño estructural</span></li>
 
      <li><span class="label">Subcategoría:</span><span class="value">Navegación coherente</span></li>
|wcag_descripcion_resumida=
    </ul>
Los elementos de navegación repetidos deben mantener su posición y orden en todo el sitio, como menús, cabeceras y barras laterales.
  </section>
 
  <section class="wcag-users">
|wcag_objetivo=
    <p>Usuarios más afectados</p>
Garantizar que los usuarios puedan aprender y anticipar dónde encontrar los elementos de navegación, facilitando una experiencia coherente.
    <ul>
 
      <li><img src="/images/4/40/Cognitiva.png" alt="Icono discapacidad cognitiva" class="icono-discapacidad" /> Personas con discapacidad cognitiva – <span class="gravedad">Barrera moderada</span></li>
|wcag_importancia=
      <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 leve</span></li>
Minimiza la carga cognitiva y facilita la orientación para personas con dificultades cognitivas, baja visión y lectores de pantalla.
    </ul>
 
  </section>
|wcag_referencias=
</article>
<ul>
</html>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/consistent-navigation.html Understanding Success Criterion 3.2.3: Consistent Navigation]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/quickref/#consistent-navigation WCAG Quick Reference – 3.2.3]</span></li>
<li>[https://webaim.org/techniques/usability/#consistency WebAIM — Consistency & Predictability]</li>
</ul>
 
|wcag_recursos=
<ul>
<li>Design systems y patrones de navegación consistente</li>
<li>Landmarks ARIA: &lt;nav&gt;, &lt;header&gt;, &lt;aside&gt;, &lt;footer&gt;</li>
</ul>
 
|wcag_tipo_evaluacion=Manual
 
|wcag_pasos_evaluacion=
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Identificar elementos de navegación repetidos.</li>
<li><span class="paso-badge">Paso 2.</span> Comprobar que mantienen orden y posición en varias páginas.</li>
<li><span class="paso-badge">Paso 3.</span> Validar etiquetas coherentes (texto y ARIA).</li>
<li><span class="paso-badge">Paso 4.</span> Verificar con teclado y lector de pantalla.</li>
</ol>
 
|wcag_resultado_evaluacion=
Los elementos de navegación repetidos conservan siempre el mismo orden relativo y posición a lo largo del sitio.
 
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
<strong>✅ Navegación consistente</strong>
<pre class="wcag-codigo-html">
<nav aria-label="Navegación principal">
  <ul>
    <li><a href="/">Inicio</a></li>
    <li><a href="/productos">Productos</a></li>
    <li><a href="/soporte">Soporte</a></li>
    <li><a href="/contacto">Contacto</a></li>
  </ul>
</nav>
</pre>
</div>
 
<div class="accessibility-card">
<strong>✅ Variaciones justificadas en navegación secundaria</strong>
<pre class="wcag-codigo-html">
<nav aria-label="Navegación principal">…</nav>
<nav aria-label="Submenú de sección actual">…</nav>
</pre>
</div>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<li>Comparación visual de páginas</li>
<li>Revisión de DOM y landmarks</li>
<li>Navegación con teclado y lector de pantalla</li>
<li>Validación de consistencia en design system</li>
</ul>
}}

Revisión del 12:15 5 nov 2025

3.2.3-A. Navegación coherente

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)

  • Los enlaces y mecanismos de navegación que se repiten en un sitio web deben aparecer siempre en el mismo orden relativo.

{{{wcag_lista_discapacidades}}}

Comprensión del criterio

Descripción resumida

Los elementos de navegación repetidos deben mantener su posición y orden en todo el sitio, como menús, cabeceras y barras laterales.

Objetivo

Garantizar que los usuarios puedan aprender y anticipar dónde encontrar los elementos de navegación, facilitando una experiencia coherente.

Importancia de cumplir el criterio

Minimiza la carga cognitiva y facilita la orientación para personas con dificultades cognitivas, baja visión y lectores de pantalla.

Referencias WCAG

Recursos de apoyo

  • Design systems y patrones de navegación consistente
  • Landmarks ARIA: <nav>, <header>, <aside>, <footer>

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Paso 1. Identificar elementos de navegación repetidos.
  2. Paso 2. Comprobar que mantienen orden y posición en varias páginas.
  3. Paso 3. Validar etiquetas coherentes (texto y ARIA).
  4. Paso 4. Verificar con teclado y lector de pantalla.

Resultado esperado

Los elementos de navegación repetidos conservan siempre el mismo orden relativo y posición a lo largo del sitio.

Ejemplo

✅ Navegación consistente

<nav aria-label="Navegación principal">
  <ul>
    <li><a href="/">Inicio</a></li>
    <li><a href="/productos">Productos</a></li>
    <li><a href="/soporte">Soporte</a></li>
    <li><a href="/contacto">Contacto</a></li>
  </ul>
</nav>

✅ Variaciones justificadas en navegación secundaria

<nav aria-label="Navegación principal">…</nav>
<nav aria-label="Submenú de sección actual">…</nav>

Otras herramientas de evaluación

  • Comparación visual de páginas
  • Revisión de DOM y landmarks
  • Navegación con teclado y lector de pantalla
  • Validación de consistencia en design system










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 3.2.3-A. Navegación coherente

Loading comments...