Addaw, ir a inicio Donar

Técnica Técnicas generales WCAG 2.2

G128Indicar la ubicación actual dentro de las barras de navegación

En resumen

Esta técnica pide que la barra de navegación o el sistema de pestañas señale en qué página o paso se encuentra el usuario, mediante un icono con alternativa textual, un texto o un cambio de estado del elemento (por ejemplo, desactivando el enlace de la página actual). Beneficia a quien usa lector de pantalla, que no percibe el cambio de color, y a personas con dificultades de orientación o memoria, sobre todo en procesos de varios pasos.

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:

  1. Comprobar que se da al usuario una indicación del elemento seleccionado en ese momento dentro de la unidad de navegación.
  2. 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 las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.

Solicitar una auditoría

Fuente y licencia

Traducción al español, no oficial, realizada por ADDAW a partir de la técnica G128 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.

Financiado por la unión europea Gobierno de españa red.es Plan de recuperación transformación y resilencia kit digital