Técnica ARIA WCAG 2.2

ARIA8Explicar el destino de un enlace con aria-label

Nombre oficial en el W3C: Usar aria-label para indicar el propósito de los enlaces

En pocas palabras

Hay enlaces que solo dicen «Leer más» o «Descargar», sin un texto visible breve que los aclare. En ese caso, aria-label les da un nombre más completo para el lector de pantalla. Ese nombre debe empezar por el texto visible del enlace, por ejemplo «Leer más sobre el horario de las bibliotecas».

Por qué es importante

Muchos usuarios de lector de pantalla (programa que lee en voz alta la pantalla) saltan de enlace en enlace o piden una lista de enlaces. Si varios dicen «Descargar», no saben cuál es el PDF de la convocatoria y cuál el de las bases.

Los programas de control por voz también usan este nombre. Si contiene el texto visible, la persona puede decir «pulsar Descargar» y el programa encuentra el enlace.

Cómo se hace

Úselo cuando el texto del enlace es corto o repetido y no hay un texto visible breve que lo complete. Si lo hay, use mejor aria-labelledby (técnica ARIA7).
Escriba en aria-label el texto visible del enlace y, a continuación, lo que falta: aria-label="Descargar las bases de la convocatoria (PDF)".
Recuerde que aria-label sustituye al texto del enlace para el lector de pantalla. No basta con escribir solo lo que falta.
Dé un nombre distinto a cada enlace que lleva a un destino distinto.
Valore si es mejor mostrar el texto completo en pantalla. Así ayuda a todo el mundo, no solo a quien usa lector de pantalla.

Cómo comprobarlo

Busque en el código los enlaces con aria-label.
Compruebe que el valor empieza por el texto visible del enlace o, al menos, lo contiene.
Lea el valor sin mirar la página y compruebe que dice adónde lleva el enlace.
Confirme que ese es el nombre que se anuncia. Puede verlo en las herramientas del navegador (F12, panel «Accesibilidad») o en la lista de enlaces del lector de pantalla.

Ejemplo

Noticia breve sin titular: el párrafo es demasiado largo para usarlo como nombre del enlace.

<p>El Ayuntamiento amplía el horario de las bibliotecas
   municipales durante la época de exámenes.</p>
<a href="/noticias/horario-bibliotecas"
   aria-label="Leer más sobre el horario de las bibliotecas">Leer más</a>

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 ARIA8 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 compatibles con Accessible Rich Internet Applications (WAI-ARIA).

Descripción

El objetivo de esta técnica es describir el propósito de un enlace mediante el atributo aria-label. El atributo aria-label ofrece una forma de asignar una etiqueta textual descriptiva a un objeto, como un enlace, cuando no hay elementos visibles en la página que describan dicho objeto. Si hay elementos descriptivos visibles en la página, debe usarse el atributo aria-labelledby en lugar de aria-label. Proporcionar una etiqueta textual descriptiva permite al usuario distinguir el enlace de otros enlaces de la página web que conducen a otros destinos y le ayuda a decidir si seguirlo o no. En algunas tecnologías de asistencia, el valor de aria-label se mostrará en la lista de enlaces en lugar del texto real del enlace.

Según Accessible Name and Description Computation y el cálculo del nombre y la descripción accesibles de HTML Accessibility API Mappings 1.0, el texto de aria-label anula el texto proporcionado dentro del enlace. Por tanto, las tecnologías de asistencia usarán el texto proporcionado en lugar del texto del enlace. Por este motivo se recomienda comenzar el texto de aria-label con el texto usado dentro del enlace. Así se garantiza una comunicación coherente entre los usuarios.

Ejemplos

Describir el propósito de un enlace en HTML mediante aria-label.

En algunas situaciones, quienes diseñan pueden optar por aligerar la apariencia visual de los enlaces de una página usando textos de enlace cortos y repetidos, como "read more" (leer más). Estas situaciones son un buen caso de uso para aria-label, ya que el texto simple y no descriptivo "read more" de la página puede sustituirse por una etiqueta más descriptiva del enlace. Las palabras "read more" se repiten en el aria-label (que sustituye al texto original del enlace, "Read more") para garantizar una comunicación coherente entre los usuarios.

El criterio de conformidad 2.5.3 Etiqueta en el nombre exige que el texto de la etiqueta visible esté incluido en el «nombre accesible», que generalmente se establece mediante aria-label. Los ejemplos siguientes cumplen este requisito.

<h4>Neighborhood News</h4>
<p>Seminole tax hike: Seminole city managers are proposing a 75% increase in 
  property taxes for the coming fiscal year.
  <a href="taxhike.html" aria-label="Read more about Seminole tax hike">
   Read more</a>
</p> 
<p>Baby Mayor: Seminole voters elect the city's youngest mayor ever by voting
   in 3 year old Willy "Dusty" Williams in yesterday's mayoral election.
   <a href="babymayor.html" aria-label="Read more about Seminole's new baby mayor">
    Read more</a>
</p>

Pruebas

Procedimiento

Para los elementos de enlace que usan aria-label:

Comprobar que el valor del atributo aria-label describe adecuadamente el propósito del elemento de enlace.

Resultados esperados

La comprobación n.º 1 es verdadera.

Recursos

HTML Accessibility API Mappings
Accessible Name and Description Computation (cálculo del nombre y la descripción accesibles)

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