aria-current

Cuándo utilizarlo

En el único elemento que representa «dónde se encuentra» el usuario dentro de un conjunto de elementos relacionados. El caso clásico es el enlace activo en una navegación principal: un lector de pantalla anuncia «Precios, página actual, enlace», y los usuarios con visión ven un elemento destacado que corresponde al ítem activo.

Otros casos frecuentes:

• El paso actual en un formulario o asistente de varios pasos (aria-current="step").
• La fecha de hoy en una cuadrícula de calendario (aria-current="date").
• El elemento activo de una ruta de navegación (aria-current="page").
• El elemento que se reproduce actualmente en una lista de reproducción multimedia (aria-current="true").

Diferencias con estados relacionados:

• aria-current — «usted está aquí» dentro de una navegación o conjunto de elementos. Se usa en enlaces y widgets similares que no están basados en selección.
• aria-selected — selección dentro de un contenedor de tipo selección (tablista, listbox, árbol, cuadrícula). La selección es algo que el usuario cambia.
• aria-pressed — botón de alternancia. El propio botón está activado o desactivado.
• aria-checked — casilla de verificación o botón de opción. Elección independiente.

Cómo mantenerlo sincronizado

Valores válidos: "page", "step", "location", "date", "time", "true", "false". Conviene elegir el token más específico — "page" para enlaces de navegación, "step" para asistentes, "date" para calendarios. "true" es el valor genérico de reserva cuando ninguno de los otros encaja. "false" (el valor por defecto) significa «no es el actual»; habitualmente se omite el atributo en los elementos que no son el activo.

En un menú de navegación, exactamente un enlace debe llevar aria-current en todo momento. Se debe actualizar en el lado del cliente cuando cambia la ruta; las páginas renderizadas en el servidor pueden incluirlo directamente en el HTML.

El elemento actual debe destacarse visualmente para que los usuarios con visión reciban el mismo indicador. Un patrón habitual es [aria-current="page"] { font-weight: 600; }.

Errores frecuentes

• Usar aria-current="true" en todos los enlaces de navegación, o en ninguno de ellos.
• Usar aria-selected en un enlace de navegación — semántica incorrecta; el enlace no es una opción seleccionable.
• Olvidar actualizar aria-current tras los cambios de ruta en el lado del cliente en una aplicación de página única.
• Aplicar el estado activo con CSS pero no establecer nunca aria-current. Los lectores de pantalla no anuncian ninguna información distintiva.
• Usar aria-current="page" en un botón que no es un enlace de navegación.
• Establecer aria-current en el contenedor <nav> en lugar de en el enlace individual.

Ejemplo

<nav aria-label="Primary">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/pricing" aria-current="page">Pricing</a></li>
    <li><a href="/docs">Docs</a></li>
  </ul>
</nav>