Agencia de Gobierno Electrónico y Sociedad de la Información y del Conocimiento

Navegación

Proporciona formas de ayudar a las personas para navegar, encontrar contenido y determinar dónde se encuentran.

Criterios que contemplan

1. Criterio 2.4.1: Evitar bloques (Nivel A)
2. Criterio 2.4.2: Título de la página (Nivel A)
3. Criterio 2.4.3: Orden del foco (Nivel A)
4. Criterio 2.4.4: Propósito de los enlaces (en su contexto) (Nivel A)
5. Criterio 2.4.5: Múltiples vías (Nivel AA)
6. Criterio 2.4.6: Encabezados y etiquetas (Nivel AA)
7. Criterio 2.4.7: Foco visible (Nivel AA)
8. Criterio 2.4.11: Enfoque no oscurecido (mínimo) (nivel AA)

Objetivos

1. Ayudar a las personas que navegan el contenido con teclado para que accedan directamente a la información principal, incorporando saltos que eviten la navegación de zonas que se repiten en todas las páginas. Un ejemplo es el menú en un sitio web, se repite en todas las páginas. En ese caso se recomienda incluir enlaces para saltar a diferentes zonas, como omitir los menús de navegación. Se debe asegurar que los enlaces de salto estén visibles cuando reciban el foco
2. Cada página tiene un título relevante y descriptivo. De esta manera, las personas pueden encontrar un contenido y orientarse en él a través de este título sin necesidad de leer o interpretar el contenido de la página. Cada título no debería superar los 75 caracteres, esta sugerencia ayuda a que las personas con lectores de pantalla puedan entender el propósito del contenido de manera clara y concisa, facilitando la navegación y la comprensión.
3. Las personas que navegan por teclado lo hacen en el orden correcto. Para ello, se debe lograr que cada componente tome el foco en un orden tal que preserve el significado y la operatividad. Esto reduce la confusión, al permitirle a la persona formarse un modelo mental consistente del contenido.
4. Las personas entienden el propósito de cada enlace. Es importante asignar nombres descriptivos y no ambiguos a los enlaces para que las personas puedan identificar su destino. Enlaces con diferentes propósitos y destinos deben tener diferentes descripciones (Por ejemplo: no se repiten enlaces "Leer más" o "Seguir leyendo" varias veces en una misma página y con distintos destinos). Los enlaces que tengan el mismo texto de enlace deben llevar al mismo destino.
5. Las personas pueden acceder a los contenidos de múltiples maneras. Proporcionar por lo menos dos formas de acceso para cada contenido, considerando camino de migas de pan, buscador, menús, contenido relacionado, etc.
6. Los encabezados y etiquetas en la página son descriptivos del contenido que titulan. Ayuda a las personas a comprender qué información contiene la página, cómo está organizada e incluso a encontrar la información más fácilmente. Las etiquetas para los controles interactivos de los formularios también deben ser informativos y no estar duplicados. Los encabezados que organizan el contenido, subdividiendo textos largos en diferentes ideas o temas, son descriptivos. Por ejemplo: en un documento, en lugar de “Sección 1, 2 y 3” podría ser “Introducción, Desarrollo, Conclusión”.
7. Los usuarios saben qué elemento tiene el foco del teclado. Existe al menos un modo de operar donde el indicador del foco del teclado puede ser ubicado visualmente. Hacer coincidir el orden del foco con el orden de lectura tanto como sea posible para mantener una navegación lógica e intuitiva del contenido. Comprobar que es visualmente evidente el elemento que tiene el foco actual del teclado (presionando la tecla TAB el foco se mueve por la página y se puede ver dónde se encuentra). Así como botones, enlaces, campos, etc. El foco debe ser visible y tener suficiente contraste en todos los elementos
8. Garantizar que el elemento que recibe el foco del teclado siempre sea parcialmente visible en la ventana gráfica del usuario. Para las personas videntes que utilizan un teclado (o un dispositivo que funciona a través de la interfaz del teclado, como un interruptor o la entrada de voz), es fundamental conocer el punto de enfoque actual. El componente con el foco señala el punto de interacción en la página. Si los usuarios no pueden ver el elemento con el foco, podrían no saber cómo proceder o incluso pensar que el sistema ha dejado de responder.

Método o herramienta sugerida para su evaluación

A la fecha de publicación de este documento, no existe una herramienta que permita verificar que se cumplen los requisitos por lo que debe realizarse una evaluación manual. Debe verificar los siguientes puntos:

• Navegar con teclado y observar que el primer objeto que toma el foco es un enlace que permite saltar los bloques repetitivos de la página. Activarlo con Enter y verificar que efectivamente nos lleva al contenido.
• Verificar que el título de la pestaña en el navegador sea descriptivo del contenido de la página y que diferentes páginas tienen diferente título. Además debería incluir una versión corta del nombre del sitio.
• Navegando con el teclado verificar que el orden de tabulación es lógico.
• En este punto se dispone de una extensión “taba11y - Tab order accessibility testing”.
• Revisar textos de enlaces. Ver si hay enlaces con el mismo texto que apunten a distinta URL (ejemplo: ver más, seguir leyendo, click aquí). Si los hay, al menos están contenidos en un párrafo o ítem de lista que les da contexto.
• Verificar que existen por lo menos dos caminos para acceder a una página: menú de navegación, buscador, camino de migas de pan, mapa del sitio, páginas relacionadas.
• Extensión de navegador: HeadingsMap. Instálela y ejecútela.
• Utilice la navegación por teclado (Tab) para confirmar que el componente enfocado nunca quede completamente oculto por elementos fijos (cabeceras, menús, modales o banners de cookies) creados por el autor. Si el elemento se oscurece parcialmente, se cumple si al menos una parte es visible.
• Una página tiene un pie de página fijo (fijado en la parte inferior de la ventana de visualización). Al desplazar la página hacia abajo, el elemento enfocado no queda completamente oculto visualmente por el pie de página porque el contenido en el visor se desplaza hacia arriba para mostrar siempre el elemento con el enfoque del teclado usando el relleno de desplazamiento.
• Una página tiene un cuadro de diálogo de aprobación de cookies de ancho completo. El diálogo es modal, impidiendo el acceso a los otros controles de la página hasta que se haya descartado. El enfoque no está oculto porque la mayor parte del diálogo de aprobación de cookies permanece en pantalla (hasta que se hacen y envían las selecciones), por lo que la mayor parte del indicador de enfoque del teclado permanece visible.
• Una notificación se implementa como un encabezado fijo y el enfoque del teclado se mueve a la notificación para que al menos parte del indicador de enfoque quede visible. La notificación desaparece cuando pierde el enfoque, así que no oculta ningún otro control, y parte del indicador de enfoque del teclado anterior es visible.