Técnica Técnicas generales WCAG 2.2

G128Marcar en el menú la página o el paso en que se está

Nombre oficial en el W3C: Indicar la ubicación actual dentro de las barras de navegación

En pocas palabras

En el menú de navegación, la opción que corresponde a la página actual se distingue de las demás. Puede llevar otro estilo, un icono o un texto, y debe anunciarse también al lector de pantalla. Es especialmente útil en procesos por pasos, como una compra o una solicitud.

Por qué es importante

Saber dónde se está evita perderse y repetir caminos. En un trámite por pasos, indica cuánto falta.

Ayuda a personas con discapacidad cognitiva o problemas de memoria. Si la marca se anuncia correctamente, también ayuda a quien usa lector de pantalla (programa que lee en voz alta lo que hay en la pantalla).

Cómo se hace

Destaque visualmente la opción actual: subrayado, borde, negrita o un icono. No use solo un cambio de color.
Añada aria-current="page" al enlace de la página actual. En un proceso por pasos, use aria-current="step".
Si usa un icono, dele un texto alternativo, como «actual».
Compruebe que la marca coincide siempre con la página que se está viendo.
No confunda esta marca con el estilo de foco o de paso del ratón: es otra cosa y debe estar siempre visible.

Cómo comprobarlo

Recorra varias páginas y confirme que el menú marca en cada una la opción correcta.
Mire la página en escala de grises o sin colores: la marca debe seguir viéndose.
Con un lector de pantalla, lleve el foco a esa opción: debe anunciarse como «página actual» o «paso actual».

Ejemplo

En el menú de pasos de una solicitud, el paso actual lleva aria-current y un estilo propio.

<nav aria-label="Pasos de la solicitud">
  <ol>
    <li><a href="/solicitud/datos">1. Datos personales</a></li>
    <li><a href="/solicitud/documentos" aria-current="step">2. Documentos</a></li>
    <li>3. Revisión</li>
  </ol>
</nav>
<style>
  [aria-current] { font-weight: bold; border-bottom: 3px solid; }
</style>

Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica G128 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

Aplicabilidad

Todas las tecnologías.

Descripción

El objetivo de esta técnica es ayudar a orientar al usuario proporcionando información sobre su ubicación actual a través del componente de navegación de la interfaz de usuario. Esta técnica es especialmente útil cuando las páginas web son pasos de una tarea que deben completarse en orden. Proporcionar esta indicación ayuda al usuario a entender mejor en qué punto de la secuencia se encuentra. La ubicación puede indicarse añadiendo un icono o un texto, o cambiando el estado del elemento.

Ejemplos

Una página web implementa una navegación de tipo panel de pestañas. Una lista de pestañas se muestra horizontalmente a lo ancho de la página. El contenido actual se muestra en un panel debajo de la lista de pestañas. Cuando el usuario se desplaza hasta una pestaña concreta y la selecciona, el contenido del panel se actualiza para reflejar el tema de la pestaña seleccionada. Además, el color de fondo de la pestaña seleccionada cambia respecto al color predeterminado y se muestra un icono de marca de verificación junto al texto de la pestaña para indicar que es el panel activo. El icono de marca de verificación incluye una alternativa textual apropiada.

La barra de navegación de un sitio se implementa como una lista de enlaces. La barra de navegación aparece en todas las páginas web de una colección de páginas web. Cuando el usuario da el foco a un enlace concreto de la barra de navegación o pasa el puntero sobre él, el color de fondo del enlace cambia. Este cambio de estilo al pasar el ratón o al recibir el foco se especifica mediante la hoja de estilos en cascada de la página web. Cuando el enlace pierde el foco, el estilo vuelve al estilo normal de los enlaces. Cuando se activa el enlace para cambiar el contenido de la página, el enlace seleccionado dentro de la barra de navegación se desactiva, puesto que el resultado de seguir ese enlace es la página web que se está mostrando en ese momento. El cambio de color de fondo avisa visualmente a los usuarios videntes del enlace que se va a seleccionar. Desactivar el enlace informa a todos los usuarios de que es el tema seleccionado en ese momento.

Pruebas

Procedimiento

Cuando el componente de navegación se repite en un conjunto de páginas web:

Comprobar que se da al usuario una indicación del elemento seleccionado en ese momento dentro de la unidad de navegación.
Comprobar que el elemento seleccionado se corresponde con el contenido que se está mostrando.

Resultados esperados

Las comprobaciones n.º 1 y n.º 2 son verdaderas.

Cómo lo comprobamos en ADDAW

En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica G128 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.