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

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
Línea 23: Línea 23:
   <span class="discapacidad-texto">[[:Categoría:Discapacidad baja visión|Baja visión]]</span> –
   <span class="discapacidad-texto">[[:Categoría:Discapacidad baja visión|Baja visión]]</span> –
   <span class="gravedad gravedad-leve">Barrera leve</span>
   <span class="gravedad gravedad-leve">Barrera leve</span>
</li>
<li class="discapacidad-item">
  [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> –
  <span class="gravedad gravedad-grave">Barrera grave</span>
</li>
</li>


Línea 28: Línea 33:
[[Categoría:Discapacidad cognitiva]]
[[Categoría:Discapacidad cognitiva]]
[[Categoría:Discapacidad baja visión]]
[[Categoría:Discapacidad baja visión]]
[[Categoría:Discapacidad visual total]]


|wcag_texto_criterioOAW=
|wcag_texto_criterioOAW=
Línea 42: Línea 49:


|wcag_referencias=
|wcag_referencias=
<ul>
<ul>
<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/WCAG21/Techniques/general/G61 G61: Presenting repeated components in the same relative order each time they appear]</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/WCAG21/Techniques/failures/F66 F66: Failure due to presenting navigation links in a different relative order on different pages]</span></li>
<li>[https://webaim.org/techniques/usability/#consistency WebAIM — Consistency and Predictability]</li>
</ul>
</ul>


|wcag_recursos=
|wcag_recursos=
<strong> Consejos </strong>
<ul>
<ul>
<li>Patrones de diseño consistentes (design systems)</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>
<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 58: Línea 65:
|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 (menú global, buscador, footer, sidebar).</li>
<li><span class="paso-badge">Paso 1.</span>
<li><span class="paso-badge">Paso 2.</span> Revisar varias páginas y comprobar que mantienen el mismo orden relativo y posición.</li>
Localizar los enlaces y mecanismos de navegación que se repiten en diferentes páginas del sitio web.
<li><span class="paso-badge">Paso 3.</span> Validar que las etiquetas (texto/ARIA) y el orden de tabulación son consistentes.</li>
</li>
<li><span class="paso-badge">Paso 4.</span> Verificar con teclado y lector de pantalla la previsibilidad de la navegación.</li>
 
<li><span class="paso-badge">Paso 2.</span>
Verificar que siempre aparecen en el mismo orden relativo.
</li>
</ol>
</ol>


Línea 69: Línea 79:
|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
<div class="accessibility-card">
<strong>✅ Navegación consistente</strong>
Navegación consistente, por ejemplo, siempre se encuentra en la parte superior de la págima.
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<nav aria-label="Navegación principal">
<nav aria-label="Navegación principal">
Línea 82: Línea 92:
</div>
</div>


<div class="accessibility-card">
<strong>✅ Variación justificada en navegación secundaria</strong>
<pre class="wcag-codigo-html">
<nav aria-label="Navegación principal">…</nav>
<nav aria-label="Submenú de la sección actual">…</nav>
</pre>
</div>


|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>Comparación entre páginas (capturas / inspección DOM)</li>
<li>'''Revisión estructural''': comprobar que los menús, enlaces de navegación, cabeceras, pies de página y otros bloques repetidos mantienen el mismo orden relativo en todas las páginas del sitio.</li>
<li>Revisión de landmarks y roles</li>
<li>'''Comparación entre páginas''': navegar por varias páginas y verificar que los elementos repetidos aparecen en la misma posición relativa (p. ej., menú principal siempre antes del buscador o del contenido).</li>
<li>Navegación por teclado</li>
<li>'''Inspección del DOM''': revisar que los elementos de navegación están situados en el mismo orden dentro del código fuente para evitar cambios inesperados al navegar con teclado o lector de pantalla.</li>
<li>NVDA, JAWS, VoiceOver</li>
<li>'''Pruebas con teclado y lectores de pantalla''': (NVDA, JAWS, VoiceOver) confirmar que la navegación secuencial y los atajos de encabezados/regiones ofrecen una experiencia consistente entre páginas.</li>
</ul>
</ul>
}}
}}

Revisión actual - 06:22 6 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

Consejos
  • 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. Localizar los enlaces y mecanismos de navegación que se repiten en diferentes páginas del sitio web.
  2. Paso 2. Verificar que siempre aparecen en el mismo orden relativo.

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, por ejemplo, siempre se encuentra en la parte superior de la págima. 

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

Otras herramientas de evaluación

  • Revisión estructural: comprobar que los menús, enlaces de navegación, cabeceras, pies de página y otros bloques repetidos mantienen el mismo orden relativo en todas las páginas del sitio.
  • Comparación entre páginas: navegar por varias páginas y verificar que los elementos repetidos aparecen en la misma posición relativa (p. ej., menú principal siempre antes del buscador o del contenido).
  • Inspección del DOM: revisar que los elementos de navegación están situados en el mismo orden dentro del código fuente para evitar cambios inesperados al navegar con teclado o lector de pantalla.
  • Pruebas con teclado y lectores de pantalla: (NVDA, JAWS, VoiceOver) confirmar que la navegación secuencial y los atajos de encabezados/regiones ofrecen una experiencia consistente entre páginas.










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




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_3/3.2_Predecible/3.2.3-A&oldid=3554»