Diferencia entre revisiones de «Principio 2/2.4 Navegable/2.4.5-B»
De WCAG Wiki
< Principio 2 | 2.4 Navegable
Sin resumen de edición |
Sin resumen de edición |
||
| (No se muestran 2 ediciones intermedias del mismo usuario) | |||
| Línea 1: | Línea 1: | ||
== | {{CriterioWCAG | ||
|id_wcag_criterio=2.4.5 | |||
|id_wcag_subcriterio=2.4.5-B | |||
|wcag_titulo_criterio=2.4.5-B. Acceso directo en sitios pequeños | |||
|wcag_nivel=AA | |||
|wcag_version=2.0 | |||
|wcag_principio=2_Operable | |||
|wcag_principio_url=Principio_2 | |||
< | |wcag_pauta=2.4_Navegable | ||
|wcag_pauta_url=Principio_2/2.4_Navegable | |||
|wcag_grupo=Navegación | |||
|wcag_subgrupo=Localización_de_contenido | |||
|wcag_subcriterio_url=Principio_2/2.4_Navegacion_clara/2.4.5-B | |||
|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-grave">Barrera grave</span> | |||
</li> | |||
<li class="discapacidad-item"> | |||
[[Archivo:Motriz.png|20px|class=icon-discapacidad|alt=Discapacidad motriz]] | |||
<span class="discapacidad-texto">[[:Categoría:Discapacidad motriz|Motriz]]</span> – | |||
<span class="gravedad gravedad-moderada">Barrera moderada</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-moderada">Barrera moderada</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 class="discapacidad-item"> | |||
[[Archivo:sordoceguera.png|20px|class=icon-discapacidad|alt=Discapacidad sordoceguera]] | |||
<span class="discapacidad-texto">[[:Categoría:Discapacidad sordoceguera|Sordoceguera]]</span> | |||
– | |||
<span class="gravedad gravedad-grave">Barrera grave</span> | |||
</li> | |||
|wcag_lista_discapacidades= | |||
[[Categoría:Discapacidad cognitiva]] | |||
[[Categoría:Discapacidad motriz]] | |||
[[Categoría:Discapacidad visual total]] | |||
[[Categoría:Discapacidad sordo ceguera]] | |||
|wcag_texto_criterioOAW= | |||
En los sitios web pequeños donde no exista un mapa del sitio o una función de búsqueda se debe poder acceder directamente a todas las páginas del sitio web desde el menú de navegación o desde un listado de enlaces al resto de páginas del sitio web. | |||
|wcag_descripcion_resumida= | |||
En sitios pequeños, la navegación debe permitir acceder a todas las páginas sin necesidad de buscador o mapa del sitio. | |||
El menú principal o un listado accesible debe ofrecer acceso directo a todas las secciones. | |||
|wcag_objetivo= | |||
Garantizar que los usuarios puedan localizar cualquier página de forma rápida y clara en sitios pequeños, sin depender de múltiples niveles de navegación o herramientas adicionales. | |||
|wcag_importancia= | |||
Cuando no existe buscador ni mapa del sitio, el acceso directo desde el menú es esencial para evitar pérdida de orientación, especialmente para usuarios con discapacidades cognitivas, visuales o que navegan solo con teclado. | |||
|wcag_referencias= | |||
<ul> | |||
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G126 G126: Providing a list of links to all other Web pages]</span></li> | |||
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G185 G185: Linking to all of the pages on the site from the home page]</span></li> | |||
</ul> | |||
|wcag_recursos= No hay | |||
|wcag_tipo_evaluacion=Manual | |||
|wcag_pasos_evaluacion= | |||
<ol class="paso-list"> | |||
<li><span class="paso-badge">Paso 1.</span> | |||
Verificar que se cumple alguna de las siguientes condiciones: | |||
<ul> | |||
<li>a. En cada página se proporciona un listado de enlaces al resto de páginas del sitio web (todas).</li> | |||
<li>b. En la página de inicio se proporciona un listado de enlaces a todas las páginas del sitio web y, en el resto de páginas, existe un enlace a la página de inicio.</li> | |||
</ul> | |||
</li> | |||
</ol> | |||
|wcag_resultado_evaluacion= | |||
El sitio pequeño permite acceder a todas sus páginas desde el menú o un listado visible y accesible, sin necesidad de buscador ni mapa del sitio. | |||
|wcag_ejemplo_evaluacion= | |||
<div class="accessibility-card"> | |||
El sitio web solo tiene 4 páginas y el menú contiene un acceso directo a todas ellas. | |||
<pre class="wcag-codigo-html"> | |||
<nav aria-label="Menú principal"> | |||
<ul> | |||
<li><a href="/">Inicio</a></li> | |||
<li><a href="/quienes-somos">Quiénes somos</a></li> | |||
<li><a href="/servicios">Servicios</a></li> | |||
<li><a href="/contacto">Contacto</a></li> | |||
</ul> | |||
</nav> | |||
</pre> | |||
</div> | |||
|wcag_otras_herramientas_evaluacion= | |||
<ul> | |||
<li>'''Revisión de la navegación''': comprobar que el menú o listado de enlaces ofrece acceso directo a todas las páginas del sitio cuando este es pequeño y no cuenta con buscador interno ni mapa del sitio.</li> | |||
<li>'''Inspección del contenido''': verificar que no existen páginas “huérfanas” (sin enlaces desde el menú o listado principal) y que el usuario no necesita rutas indirectas para llegar a ninguna sección.</li> | |||
<li>'''Prueba de navegación con teclado''': recorrer todos los enlaces mediante <kbd>Tab</kbd> y comprobar que la estructura es clara y que todas las páginas son alcanzables.</li> | |||
<li>'''Revisión con lector de pantalla''': (NVDA, JAWS, VoiceOver) confirmar que el menú o listado de enlaces se anuncia correctamente y permite acceder a cada página sin depender de ubicación visual.</li> | |||
</ul> | |||
}} | |||
Revisión actual - 12:44 6 nov 2025
2.4.5-B. Acceso directo en sitios pequeños
- Nivel: AA
- Versión: 2.0
- Principio: 2_Operable
- Pauta: 2.4_Navegable
- Grupo: Navegación
- Subgrupo: Localización_de_contenido
Discapacidades afectadas
Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.
-
Cognitiva –
Barrera grave
-
Motriz –
Barrera moderada
-
Visual total –
Barrera moderada
-
Visual total –
Barrera grave
-
Sordoceguera
–
Barrera grave
Enunciado del criterio (Observatorio de Accesibilidad Web)
- En los sitios web pequeños donde no exista un mapa del sitio o una función de búsqueda se debe poder acceder directamente a todas las páginas del sitio web desde el menú de navegación o desde un listado de enlaces al resto de páginas del sitio web.
Comprensión del criterio
Descripción resumida
En sitios pequeños, la navegación debe permitir acceder a todas las páginas sin necesidad de buscador o mapa del sitio.
El menú principal o un listado accesible debe ofrecer acceso directo a todas las secciones.
Objetivo
Garantizar que los usuarios puedan localizar cualquier página de forma rápida y clara en sitios pequeños, sin depender de múltiples niveles de navegación o herramientas adicionales.
Importancia de cumplir el criterio
Cuando no existe buscador ni mapa del sitio, el acceso directo desde el menú es esencial para evitar pérdida de orientación, especialmente para usuarios con discapacidades cognitivas, visuales o que navegan solo con teclado.
Referencias WCAG
Recursos de apoyo
No hay
Evaluación del criterio
Tipo de evaluación
Evaluación Manual
Procedimiento de evaluación
- Paso 1.
Verificar que se cumple alguna de las siguientes condiciones:
- a. En cada página se proporciona un listado de enlaces al resto de páginas del sitio web (todas).
- b. En la página de inicio se proporciona un listado de enlaces a todas las páginas del sitio web y, en el resto de páginas, existe un enlace a la página de inicio.
Resultado esperado
El sitio pequeño permite acceder a todas sus páginas desde el menú o un listado visible y accesible, sin necesidad de buscador ni mapa del sitio.
Ejemplo ilustrativo
El sitio web solo tiene 4 páginas y el menú contiene un acceso directo a todas ellas.
<nav aria-label="Menú principal">
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="/quienes-somos">Quiénes somos</a></li>
<li><a href="/servicios">Servicios</a></li>
<li><a href="/contacto">Contacto</a></li>
</ul>
</nav>
Otras herramientas de evaluación
- Revisión de la navegación: comprobar que el menú o listado de enlaces ofrece acceso directo a todas las páginas del sitio cuando este es pequeño y no cuenta con buscador interno ni mapa del sitio.
- Inspección del contenido: verificar que no existen páginas “huérfanas” (sin enlaces desde el menú o listado principal) y que el usuario no necesita rutas indirectas para llegar a ninguna sección.
- Prueba de navegación con teclado: recorrer todos los enlaces mediante Tab y comprobar que la estructura es clara y que todas las páginas son alcanzables.
- Revisión con lector de pantalla: (NVDA, JAWS, VoiceOver) confirmar que el menú o listado de enlaces se anuncia correctamente y permite acceder a cada página sin depender de ubicación visual.
Ejemplos accesibles y no accesibles creados por alumnos
<!DOCTYPE html>
⚠️ PROBLEMA 3.3.2-C: Este formulario NO tiene etiquetas ni instrucciones claras
Reserva de Hotel
⚠️ Problemas de este formulario:
- No hay etiquetas
<label>para ningún campo - Algunos placeholders son ambiguos ("Código" - ¿qué código?)
- No se indica qué campos son obligatorios
- No hay instrucciones sobre el formato esperado
- El select dice "Selecciona" pero ¿seleccionar qué?
- Un campo no tiene ni placeholder ni etiqueta (campo de email)
- No hay indicación de formato de fecha específico
- No se explica para qué sirve cada campo
<!DOCTYPE html>
✅ ACCESIBLE 3.3.2-C: Este formulario tiene etiquetas e instrucciones claras
Reserva de Hotel
Complete el siguiente formulario para reservar su estadía
Nota: Los campos marcados con * son obligatorios
✅ Implementación correcta:
- Cada campo tiene una etiqueta
<label>clara asociada - Los campos obligatorios están claramente marcados con *
- Hay instrucciones específicas sobre formato y contenido esperado
- Los selectores tienen opciones descriptivas, no ambiguas
- Se explica el propósito de cada campo cuando no es obvio
- Se proporcionan ejemplos en los placeholders
- Hay una nota inicial explicando la convención de campos obligatorios
- Se usan atributos ARIA apropiados (aria-required, aria-describedby)
Comentarios
A continuación se muestran comentarios sobre el criterio 2.4.5-B. Acceso directo en sitios pequeños
Loading comments...
