Técnica ARIA WCAG 2.2

ARIA7Completar el texto de un enlace con aria-labelledby

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

En pocas palabras

Los enlaces del tipo «Leer más» no dicen adónde llevan si se oyen sueltos. Con aria-labelledby, el enlace toma su nombre de textos visibles de la página, como el titular de la noticia. El lector de pantalla anuncia entonces «Leer más Abiertas las ayudas al alquiler joven».

Por qué es importante

Las personas que usan lector de pantalla (programa que lee en voz alta la pantalla) suelen pedir una lista con todos los enlaces de la página. En esa lista, diez enlaces «Leer más» iguales no sirven de nada.

Quien ve la pantalla entiende el enlace por la noticia que tiene al lado. Con aria-labelledby, quien la oye recibe la misma información, sin cambiar el diseño.

Cómo se hace

Dé un id único al texto visible que aclara el enlace, por ejemplo el titular de la noticia.
Dé también un id al propio enlace.
Escriba en el enlace aria-labelledby con los dos id separados por un espacio. El orden de la lista es el orden de lectura.
Ponga primero el id del enlace. Así el nombre empieza por el texto visible, como pide el criterio 2.5.3.
Tenga en cuenta que aria-labelledby sustituye al texto del enlace. Si no incluye el id del enlace, «Leer más» no se oirá.

Cómo comprobarlo

Busque los enlaces con aria-labelledby y compruebe que cada id de la lista existe en la página.
Con las herramientas del navegador (F12, panel «Accesibilidad»), mire el nombre («Name») del enlace. Debe ser la unión de los textos, en el orden correcto.
Lea ese nombre fuera de contexto y compruebe que dice adónde lleva el enlace.
Con NVDA, abra la lista de enlaces (Insert + F7). Con VoiceOver, use el rotor. Cada enlace debe distinguirse de los demás.

Ejemplo

Noticia de la portada de un ayuntamiento con un enlace «Leer más».

<h3 id="tit-ayudas">Abiertas las ayudas al alquiler joven</h3>
<p>El plazo termina el 30 de noviembre.</p>
<a href="/noticias/ayudas-alquiler" id="mas-ayudas"
   aria-labelledby="mas-ayudas tit-ayudas">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 ARIA7 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

Con el atributo aria-labelledby, quien desarrolla puede usar un elemento de texto visible en la página como etiqueta de un elemento enfocable (un control de formulario o un enlace). Por ejemplo, un enlace "read more..." (leer más...) podría asociarse al texto del encabezado de la sección anterior para que el propósito del enlace no resulte ambiguo (véase el ejemplo 1).

Al asociar texto a un elemento enfocable con ayuda de aria-labelledby, se asigna al elemento de texto de destino un id al que se hace referencia en el valor del atributo aria-labelledby del elemento enfocable.

También es posible usar varios elementos de texto de la página como etiqueta de un elemento enfocable. A cada uno de los elementos de texto utilizados se le debe asignar un ID único, al que se hace referencia como una cadena de id (IDREF) en el valor del atributo aria-labelledby. El texto de la etiqueta se concatena entonces siguiendo el orden de los id en el valor del atributo aria-labelledby.

Aplicado a los enlaces, aria-labelledby puede usarse para identificar el propósito de un enlace que puede resultar evidente para los usuarios videntes, pero menos obvio para los usuarios de lectores de pantalla.

El comportamiento especificado de aria-labelledby es que el texto de la etiqueta asociada se anuncia en lugar del texto del enlace (no además del texto del enlace). Cuando el propio texto del enlace deba incluirse en el texto de la etiqueta, el ID del enlace también debe figurar en la cadena de ID que forma el valor del atributo aria-labelledby.

Para más información sobre la jerarquía de asignación de nombres, consulte Accessible Name and Description Computation.

Ejemplos

Proporcionar información adicional para los enlaces

En este ejemplo, el texto del enlace tal como se muestra en pantalla se usa como comienzo del nombre accesible del enlace. Los lectores de pantalla lo anunciarán como: "Read more ...Storms hit east coast" (Leer más... Las tormentas azotan la costa este) y mostrarán ese mismo texto en la lista de enlaces, lo cual resulta muy útil para los usuarios de lectores de pantalla que navegan por enlaces.

<h2 id="headline">Storms hit east coast</h2>
<p>Torrential rain and gale force winds have struck the east coast, 
   causing flooding in many coastal towns.
  <a id="p123" href="news.html" aria-labelledby="p123 headline">Read more...</a>
</p>

Concatenar el texto del enlace a partir de varias fuentes

Puede haber casos en los que quien desarrolla coloque una etiqueta alrededor de una sección de código a la que se hará referencia.

<p>Download <span id="report-title">2012 Sales Report</span>:
   <a aria-labelledby="report-title pdf" href="#" id="pdf">PDF</a> |
   <a aria-labelledby="report-title doc" href="#" id="doc">Word</a> |
   <a aria-labelledby="report-title ppt" href="#" id="ppt">PowerPoint</a>
</p>

Pruebas

Procedimiento

Para cada enlace que tenga un atributo aria-labelledby:

Comprobar que cada id del valor del atributo aria-labelledby coincide con el id de un elemento de texto que forma parte del propósito del enlace.
Comprobar que el valor combinado del texto referenciado por el id o los id del atributo aria-labelledby describe adecuadamente el propósito del elemento de enlace.

Resultados esperados

Las comprobaciones n.º 1 y n.º 2 son verdaderas.

Recursos

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