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
 
(No se muestra una edición intermedia del mismo usuario)
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>
<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>
|wcag_lista_discapacidades=
[[Categoría:Discapacidad cognitiva]]
[[Categoría:Discapacidad baja visión]]
[[Categoría:Discapacidad visual total]]


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


|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=
<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 & Predictability]</li>
</ul>
</ul>


|wcag_recursos=
|wcag_recursos=
<strong> Consejos </strong>
<ul>
<ul>
<li>Design systems y patrones de navegación consistente</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 ARIA: &lt;nav&gt;, &lt;header&gt;, &lt;aside&gt;, &lt;footer&gt;</li>
</ul>
</ul>


Línea 42: 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.</li>
<li><span class="paso-badge">Paso 1.</span>
<li><span class="paso-badge">Paso 2.</span> Comprobar que mantienen orden y posición en varias páginas.</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 etiquetas coherentes (texto y ARIA).</li>
</li>
<li><span class="paso-badge">Paso 4.</span> Verificar con teclado y lector de pantalla.</li>
 
<li><span class="paso-badge">Paso 2.</span>
Verificar que siempre aparecen en el mismo orden relativo.
</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=
<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 66: Línea 92:
</div>
</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=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>Comparación visual de páginas</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 DOM y landmarks</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 con teclado y lector de pantalla</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>Validación de consistencia en design system</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»