Técnica ARIA WCAG 2.2

ARIA26Usar aria-current para identificar el elemento actual de un conjunto

En resumen

En un menú de navegación, un asistente por pasos o un horario, el elemento «actual» suele destacarse solo con color o negrita, algo que los lectores de pantalla no transmiten. El atributo aria-current (con valores como page, step o time) indica por software cuál es el elemento activo, de modo que la información no dependa únicamente de la presentación visual. Úselo siempre que resalte un elemento dentro de un grupo de elementos relacionados.

Aplicabilidad

Tecnologías que admiten Accessible Rich Internet Applications (WAI-ARIA).

Descripción

El propósito de esta técnica es indicar por software el elemento actual dentro de un componente de interfaz de usuario que contiene un conjunto de elementos relacionados. El atributo aria-current ofrece una forma de indicar por software el elemento que normalmente solo se resalta visualmente, por ejemplo: la página actual en una barra de navegación.

Ejemplos

Identificar la página actual en una barra de navegación

Este es un ejemplo de aria-current usado en una barra de navegación. Usa el valor page del atributo para identificar por software la página actual en la que se encuentra el usuario.

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/food" aria-current="page">Food</a></li>
    <li><a href="/drinks">Drinks</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Ejemplo funcional de identificación de la página actual en una barra de navegación.

Identificar el paso actual de un proceso

Este es un ejemplo de aria-current usado para marcar los pasos de una receta. Usa el valor step del atributo para identificar por software el paso actual:

<h2>Meringue Recipe Steps</h2>
<ol>
  <li><a href="#oven">Heat your oven</a></li>
  <li><a aria-current="step" href="#separate">Separate eggs</a></li>
  <li><a href="#whisk-eggs">Whisk egg whites</a></li>
  <li><a href="#whisk-sugar">Whisk in the sugar</a></li>
  <li><a href="#pipe">Pipe mixture into shapes</a></li>
  <li><a href="#bake">Bake</a></li>
  <li><a href="#cool">Allow to cool</a></li>
</ol>

Ejemplo funcional de identificación del paso actual de un proceso.

Identificar la hora actual en un horario

Este es un ejemplo de aria-current usado para marcar la hora actual en un horario. Usa el valor time del atributo para identificar por software la clase actual en un horario escolar:

<h2>Morning Class Schedule</h2>
<table>
  <tr>
    <th>Time</th>
    <th>Subject</th>
  </tr>
  <tr>
    <td>
      <time datetime="2021-03-25T08:30">8:30-9:00am</time>
    </td>
    <td>Morning Meeting</td>
  </tr>
  <tr>
    <td>
      <time datetime="2021-03-25T09:00">9:00-9:30am</time>
    </td>
    <td>Math</td>
  </tr>
  <tr>
    <td>
      <time aria-current="time" datetime="2021-03-25T09:30">9:30-10:30am</time>
    </td>
    <td>Reading</td>
  </tr>
  <tr>
    <td>
      <time datetime="2021-03-25T10:30">10:30-10:45am</time>
    </td>
    <td>Recess</td>
  </tr>
  <tr>
    <td>
      <time datetime="2021-03-25T10:45">10:45-11:30am</time>
    </td>
    <td>Music</td>
  </tr>
  <tr>
    <td>
      <time datetime="2021-03-25T11:30">11:30-12:00pm</time>
    </td>
    <td>Independent Work</td>
  </tr>
  <tr>
    <td>
      <time datetime="2021-03-25T12:00">12:00-12:45pm</time>
    </td>
    <td>Lunchtime</td>
  </tr>
</table>

Ejemplo funcional de identificación de la hora actual en un horario.

Pruebas

Procedimiento

Para cada componente que contenga un conjunto de elementos relacionados en el que uno de ellos se resalta visualmente para indicar que es el actual:

Comprobar que el elemento resaltado tiene un atributo aria-current con un valor adecuado.

Resultados esperados

La comprobación n.º 1 es verdadera.

Recursos

Accessible Rich Internet Applications (WAI-ARIA)
Using the aria-current attribute (uso del atributo aria-current)
Element.ariaCurrent, MDN

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 ARIA26 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.