Técnica HTML WCAG 2.2
H30Proporcionar en los elementos de anclaje un texto de enlace que describa el propósito del enlace
En resumen
Esta técnica pide que el contenido del elemento a (texto, alternativa textual de la imagen o ambos) describa por sí mismo a dónde lleva el enlace, de forma que cualquier persona pueda distinguirlo del resto y decidir si lo sigue. Es clave para quienes recorren la página con un lector de pantalla mediante listas de enlaces o saltando de enlace en enlace, y evita textos vacíos como «pulse aquí» o URL poco descriptivas.
Ejemplo práctico
Un caso muy habitual en sedes electrónicas y webs municipales: listados de documentos descargables donde el texto del enlace es la ruta del archivo y el icono de PDF lleva como alternativa el nombre del fichero de la imagen.
Así no: Enlace con la ruta del archivo como texto
El texto del enlace es la ruta del archivo («/docs/of-2027.pdf») y el icono tiene alt="icono-pdf.svg". El lector de pantalla anuncia algo como «enlace, barra docs barra of guion 2027 punto pdf, icono guion pdf punto svg», que no dice qué documento se va a abrir.
<style>
.docs { list-style: none; padding: 0; }
.docs li { margin: 8px 0; }
.docs a { color: #412c56; }
.docs img { vertical-align: middle; margin-left: 6px; }
</style>
<h2>Normativa municipal</h2>
<ul class="docs">
<li><a href="#">/docs/of-2027.pdf
<img src="data:image/svg+xml,…" alt="icono-pdf.svg" width="20" height="20"></a></li>
<li><a href="#">/docs/tasas-agua-2027.pdf
<img src="data:image/svg+xml,…" alt="icono-pdf.svg" width="20" height="20"></a></li>
</ul>
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Así sí: Texto de enlace descriptivo y alt informativo
El contenido del elemento a es ahora el nombre del documento y el icono tiene alt="(PDF)", que aporta el formato como información adicional. El nombre accesible queda «Ordenanzas fiscales 2027 (PDF)».
<style>
.docs { list-style: none; padding: 0; }
.docs li { margin: 8px 0; }
.docs a { color: #412c56; }
.docs img { vertical-align: middle; margin-left: 6px; }
</style>
<h2>Normativa municipal</h2>
<ul class="docs">
<li><a href="#">Ordenanzas fiscales 2027
<img src="data:image/svg+xml,…" alt="(PDF)" width="20" height="20"></a></li>
<li><a href="#">Tasas del servicio de agua 2027
<img src="data:image/svg+xml,…" alt="(PDF)" width="20" height="20"></a></li>
</ul>Pruébelo aquí:
Cómo comprobarlo
Errores frecuentes en auditorías
- Usar la URL o el nombre del fichero como texto del enlace en listados de descargas.
- Dejar en el alt de los iconos el nombre del archivo de imagen o textos como «icono» o «imagen».
- Repetir en el alt de la imagen el mismo texto del enlace, con lo que el lector lo anuncia dos veces; si el texto basta, el alt debe ir vacío.
- Indicar el formato o el tamaño del archivo solo con el icono, sin alternativa textual que lo transmita.
Técnica completa: traducción al español del texto del W3C
Aplicabilidad
Documentos HTML que contienen enlaces (elementos <a href>)
Descripción
El objetivo de esta técnica es describir el propósito de un enlace proporcionando un texto descriptivo como contenido del elemento a. La descripción permite al usuario distinguir este enlace de los demás enlaces de la página web y le ayuda a decidir si seguirlo o no. El URI del destino por lo general no es suficientemente descriptivo.
Cuando una imagen es el único contenido de un enlace, la alternativa textual de la imagen describe la función concreta del enlace.
Cuando el contenido de un enlace incluye texto y una o más imágenes, si el texto basta para describir el propósito del enlace, las imágenes pueden tener una alternativa textual vacía. (Consulte Usar un alt nulo y ningún atributo title en los elementos img de las imágenes que la tecnología de asistencia debe ignorar.) Cuando las imágenes transmiten información más allá del propósito del enlace, también deben tener un texto alt adecuado.
Ejemplos
Describir el propósito de un enlace en HTML en el contenido textual del elemento a.
<a href="routes.html">
Current routes at Boulders Climbing Gym
</a>Usar el atributo alt del elemento img para describir el propósito de un enlace gráfico.
<a href="routes.html">
<img src="topo.gif" alt="Current routes at Boulders Climbing Gym">
</a> Usar un atributo alt vacío cuando el elemento de anclaje (a) contiene, además del elemento img, un texto que describe el propósito del enlace. Tenga en cuenta que el texto del enlace aparecerá en la página junto a la imagen.
<a href="routes.html">
<img src="topo.gif" alt="">
Current routes at Boulders Climbing Gym
</a>Un sitio permite a los usuarios enviar opiniones sobre los productos haciendo clic en el enlace "Feedback" (opinión) de la página de detalle de cada producto. Otros usuarios pueden responder a cualquier opinión. Cuando hay una respuesta disponible a la opinión del usuario, el enlace de opinión muestra un icono, cuya alternativa textual es "response received" (respuesta recibida), después del texto "Feedback". El documento de ayuda del sitio describe este icono como un bocadillo que contiene comillas e incluye el icono, con su alternativa textual, como ejemplo. En las páginas de detalle de producto se usa la misma alternativa textual (cuando hay una respuesta disponible) para contribuir a que los usuarios que siguen la documentación puedan identificar correctamente la imagen tal como está documentada.
<a href="prod_123_feedback.html">
Feedback
<img src="response.gif" width="15" height="15" alt="response received">
</a>Un enlace contiene texto y un icono, y el icono proporciona información adicional sobre el destino.
<a href="WMFP.pdf">
Woodend Music Festival Program
<img src="pdficon.gif" alt="PDF format">
</a>El informe anual de la empresa "MyCorp" se publica en el sitio web corporativo como PDF, y el presupuesto anual de la empresa se publica en el sitio web como archivo de Excel.
Muchos usuarios prefieren conocer el tipo de archivo cuando abrir un archivo implica abrir una nueva aplicación para verlo, por lo que a menudo se considera útil incluir esta información adicional. Sin embargo, no es obligatorio para cumplir este criterio de conformidad.
<ul>
<li>
<a href="2009mycorp_report.pdf">MyCorp 2009 Annual Report (PDF)</a>
</li>
<li>
<a href="2009mycorp_budget.xls">MyCorp 2009 Annual Budget (Excel)</a>
</li>
</ul>Pruebas
Procedimiento
Para cada enlace del contenido que use esta técnica:
- Comprobar que el elemento
aincluye texto o una alternativa textual para el contenido no textual. - Si un elemento
imges el único contenido del elementoa, comprobar que su alternativa textual describe el propósito del enlace. - Si el elemento
acontiene uno o más elementosimgy la alternativa textual de dichos elementosimgestá vacía, comprobar que el texto del enlace describe el propósito del enlace. - Si el elemento
asolo contiene texto, comprobar que el texto describe el propósito del enlace.
Resultados esperados
- Las comprobaciones anteriores son verdaderas.
Recursos
- HTML - Requirements for providing text to act as an alternative for images (requisitos para proporcionar texto que sirva de alternativa a las imágenes)
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.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica H30 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.
