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

De WCAG Wiki
Sin resumen de edición
Sin resumen de edición
Línea 12: Línea 12:
|wcag_subgrupo=Navegacion
|wcag_subgrupo=Navegacion
|wcag_subcriterio_url=Principio_3/3.2_Predecible/3.2.3-A
|wcag_subcriterio_url=Principio_3/3.2_Predecible/3.2.3-A
|wcag_discapacidades=
<li class="discapacidad-item">
  [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –
  <span class="gravedad gravedad-moderada">Barrera moderada</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-leve">Barrera leve</span>
</li>
|wcag_lista_discapacidades=
[[Categoría:Discapacidad cognitiva]]
[[Categoría:Discapacidad baja visión]]


|wcag_texto_criterioOAW=
|wcag_texto_criterioOAW=
Línea 17: Línea 33:


|wcag_descripcion_resumida=
|wcag_descripcion_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.
Los menús, cabeceras, pies y otros elementos de navegación repetidos mantienen la misma posición y orden en todas las páginas del sitio.


|wcag_objetivo=
|wcag_objetivo=
Garantizar que los usuarios puedan aprender y anticipar dónde encontrar los elementos de navegación, facilitando una experiencia coherente.
Facilitar que las personas aprendan el patrón de navegación y localicen opciones de forma predecible y eficiente en todo el sitio.


|wcag_importancia=
|wcag_importancia=
Minimiza la carga cognitiva y facilita la orientación para personas con dificultades cognitivas, baja visión y lectores de pantalla.
La consistencia reduce la carga cognitiva, mejora la orientación y beneficia a usuarios con dificultades cognitivas, baja visión y a quienes usan lectores de pantalla.


|wcag_referencias=
|wcag_referencias=
Línea 29: Línea 45:
<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/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><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>
<li>[https://webaim.org/techniques/usability/#consistency WebAIM — Consistency and Predictability]</li>
</ul>
</ul>


|wcag_recursos=
|wcag_recursos=
<ul>
<ul>
<li>Design systems y patrones de navegación consistente</li>
<li>Patrones de diseño consistentes (design systems)</li>
<li>Landmarks ARIA: &lt;nav&gt;, &lt;header&gt;, &lt;aside&gt;, &lt;footer&gt;</li>
<li>Landmarks semánticos: <code>&lt;nav&gt;</code>, <code>&lt;header&gt;</code>, <code>&lt;aside&gt;</code>, <code>&lt;footer&gt;</code></li>
</ul>
</ul>


Línea 42: Línea 58:
|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
<ol class="paso-list">
<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 1.</span> Identificar elementos de navegación repetidos (menú global, buscador, footer, sidebar).</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 2.</span> Revisar varias páginas y comprobar que mantienen el mismo orden relativo y posición.</li>
<li><span class="paso-badge">Paso 3.</span> Validar etiquetas coherentes (texto y ARIA).</li>
<li><span class="paso-badge">Paso 3.</span> Validar que las etiquetas (texto/ARIA) y el orden de tabulación son consistentes.</li>
<li><span class="paso-badge">Paso 4.</span> Verificar con teclado y lector de pantalla.</li>
<li><span class="paso-badge">Paso 4.</span> Verificar con teclado y lector de pantalla la previsibilidad de la navegación.</li>
</ol>
</ol>


|wcag_resultado_evaluacion=
|wcag_resultado_evaluacion=
Los elementos de navegación repetidos conservan siempre el mismo orden relativo y posición a lo largo del sitio.
Los mecanismos de navegación repetidos conservan el mismo orden relativo y posición en todas las páginas del sitio.


|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
Línea 67: Línea 83:


<div class="accessibility-card">
<div class="accessibility-card">
<strong>✅ Variaciones justificadas en navegación secundaria</strong>
<strong>✅ Variación justificada en navegación secundaria</strong>
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<nav aria-label="Navegación principal">…</nav>
<nav aria-label="Navegación principal">…</nav>
<nav aria-label="Submenú de sección actual">…</nav>
<nav aria-label="Submenú de la sección actual">…</nav>
</pre>
</pre>
</div>
</div>
Línea 76: Línea 92:
|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>Comparación visual de páginas</li>
<li>Comparación entre páginas (capturas / inspección DOM)</li>
<li>Revisión de DOM y landmarks</li>
<li>Revisión de landmarks y roles</li>
<li>Navegación con teclado y lector de pantalla</li>
<li>Navegación por teclado</li>
<li>Validación de consistencia en design system</li>
<li>NVDA, JAWS, VoiceOver</li>
</ul>
</ul>
}}
}}

Revisión del 12:18 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.

Comprensión del criterio

Descripción resumida

Los menús, cabeceras, pies y otros elementos de navegación repetidos mantienen la misma posición y orden en todas las páginas del sitio.

Objetivo

Facilitar que las personas aprendan el patrón de navegación y localicen opciones de forma predecible y eficiente en todo el sitio.

Importancia de cumplir el criterio

La consistencia reduce la carga cognitiva, mejora la orientación y beneficia a usuarios con dificultades cognitivas, baja visión y a quienes usan lectores de pantalla.

Referencias WCAG

Recursos de apoyo

  • Patrones de diseño consistentes (design systems)
  • Landmarks semánticos: <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 (menú global, buscador, footer, sidebar).
  2. Paso 2. Revisar varias páginas y comprobar que mantienen el mismo orden relativo y posición.
  3. Paso 3. Validar que las etiquetas (texto/ARIA) y el orden de tabulación son consistentes.
  4. Paso 4. Verificar con teclado y lector de pantalla la previsibilidad de la navegación.

Resultado esperado

Los mecanismos de navegación repetidos conservan el mismo orden relativo y posición en todas las páginas 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>

✅ Variación justificada en navegación secundaria

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

Otras herramientas de evaluación

  • Comparación entre páginas (capturas / inspección DOM)
  • Revisión de landmarks y roles
  • Navegación por teclado
  • NVDA, JAWS, VoiceOver










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