Addaw, ir a inicio Donar

Técnica ARIA WCAG 2.2

ARIA26Marcar con aria-current el elemento actual de un menú o una lista de pasos

Nombre oficial en el W3C: Usar aria-current para identificar el elemento actual de un conjunto

En pocas palabras

En muchas webs el enlace de la página en la que se está aparece resaltado en el menú. Ese resaltado solo se ve. El atributo aria-current permite que el lector de pantalla también lo anuncie, por ejemplo como «página actual» o «paso actual».

Por qué es importante

Un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla) no percibe colores ni subrayados. Sin aria-current, la persona ciega oye todos los enlaces del menú iguales.

Así no sabe en qué sección está ni en qué paso de un trámite se encuentra. Tiene que deducirlo leyendo el contenido de la página.

Cómo se hace

  1. Localice los grupos de elementos donde uno se resalta como actual: menú principal, migas de pan, pasos de un formulario, calendario o paginación.
  2. Añada aria-current solo al elemento actual. No lo ponga en los demás con valor false; basta con omitirlo.
  3. Elija el valor adecuado: page para la página, step para un paso, location para un punto de un mapa o diagrama, date o time para fechas y horas.
  4. Si ninguno encaja, use true.
  5. Mantenga también el resaltado visual. El atributo es para el lector de pantalla; las personas que ven necesitan la señal visual.
  6. Si el elemento actual cambia sin recargar la página, mueva el atributo con JavaScript al nuevo elemento.

Cómo comprobarlo

  1. Busque en la página menús, pasos o listas con un elemento resaltado como actual.
  2. Abra las herramientas del navegador (tecla F12) e inspeccione ese elemento. Debe tener aria-current con un valor adecuado.
  3. Compruebe que ningún otro elemento del grupo lleva el atributo.
  4. Con NVDA o VoiceOver, recorra el menú. Al llegar al enlace actual debe oír algo como «página actual».

Ejemplo

Menú principal de un ayuntamiento, visitando la sección de Trámites.

<nav aria-label="Principal">
  <ul>
    <li><a href="/">Inicio</a></li>
    <li><a href="/tramites" aria-current="page">Trámites</a></li>
    <li><a href="/agenda">Agenda</a></li>
  </ul>
</nav>
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 ARIA26 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

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:

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

Resultados esperados

  • La comprobación n.º 1 es verdadera.

Recursos

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