Técnica ARIA WCAG 2.2

ARIA8Usar aria-label para indicar el propósito de los enlaces

En resumen

Cuando una página repite enlaces cortos como «leer más» y no hay ningún texto visible que pueda servir de etiqueta, esta técnica propone describir el destino del enlace con el atributo aria-label. Como aria-label sustituye al texto del enlace en los lectores de pantalla, conviene empezar la etiqueta con el mismo texto visible para no desorientar a nadie y cumplir también el criterio 2.5.3 Etiqueta en el nombre.

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