La navegación visual suele marcar la página actual con un color o un subrayado. aria-current="page" comunica la misma relación a las tecnologías de asistencia sin cambiar el destino del enlace.

<nav aria-label="Tutorials">
  <a href="/tutorials/">All tutorials</a>
  <a href="/tutorials/forms/" aria-current="page">Forms</a>
</nav>

Utilice el valor que describe la relación.

  • Utilice la página para la página actual en un conjunto de páginas.
  • Utilice ubicación para el paso actual de un proceso o ubicación en una estructura más amplia cuando ese significado encaje.
  • Configure aria-current solo en el elemento o elementos que realmente están actuales en ese conjunto de navegación.

Mantener juntos el estado visual y semántico.

Derive el estilo activo y el valor actual de aria del mismo estado de ruta. Una falta de coincidencia les dice a los usuarios videntes y lectores de pantalla historias diferentes.

Verifique las rutas anidadas y las páginas de índice para que un elemento de navegación principal no se marque como actual para cada destino no relacionado.