Addaw, ir a inicio Donar

Técnica HTML WCAG 2.2

H30Escribir textos de enlace que digan adónde llevan

Nombre oficial en el W3C: Proporcionar en los elementos de anclaje un texto de enlace que describa el propósito del enlace

En pocas palabras

El texto de cada enlace, es decir, lo que hay dentro del elemento a, debe decir adónde lleva o qué hace. Si el enlace contiene una imagen, su texto alternativo cuenta como parte del texto del enlace. Una ruta de archivo o un nombre de imagen no dicen nada a quien escucha el enlace.

Por qué es importante

Las personas que usan lector de pantalla suelen saltar de enlace en enlace o pedir la lista de todos los enlaces. Oyen solo su texto.

Si el texto es «/docs/of-2027.pdf» o «icono-pdf.svg», no saben qué documento abrirán. Lo mismo pasa con un enlace que solo tiene una imagen sin alt. Un texto claro también ayuda a quien lee deprisa o tiene dificultades de comprensión.

Cómo se hace

  1. Escriba como texto del enlace el nombre del destino: «Ordenanzas fiscales 2027», no la dirección ni el nombre del archivo.
  2. Si el enlace es solo una imagen, ponga en su alt el destino o la acción, no lo que se ve: «Inicio», no «casa».
  3. Si el enlace tiene texto e imagen, use alt="" cuando el texto ya basta. Si la imagen añade algo, como el formato, póngalo en el alt: «(PDF)».
  4. Evite enlaces genéricos como «Más información». Si los usa, la frase o el elemento de lista donde están debe aclarar el destino.

Ejemplo práctico

Es un caso muy habitual en sedes electrónicas y webs municipales. En los listados de documentos, el texto del enlace es la ruta del archivo. Y el icono de PDF lleva como alternativa el nombre 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»). 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». No dice qué documento se va a abrir.

Captura de pantalla del ejemplo incorrecto: Enlace con la ruta del archivo como texto
Así se ve el ejemplo incorrecto.

La demostración contiene, a propósito, el error de accesibilidad que se explica.

Ver el código del ejemplo incorrecto
<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>

Así sí: Texto de enlace claro y alt útil

Ahora el texto del enlace es el nombre del documento. El icono tiene alt="(PDF)", que añade el formato. El enlace se anuncia como «Ordenanzas fiscales 2027 (PDF)».

Pruébelo aquí:

Ver el código del ejemplo correcto
<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>

Cómo comprobarlo

Lector de pantalla (NVDA o VoiceOver)

  1. Recorrer los enlaces con Tab o abrir la lista de enlaces (NVDA: Insert + F7; VoiceOver: rotor con VO + U).
  2. Comprobar que cada enlace anuncia el nombre del documento o de la página. No debe anunciar una dirección, un nombre de archivo ni un texto genérico.
  3. En los enlaces con imágenes, comprobar que el alt aporta algo útil, o que está vacío si el texto ya basta.

Debería anunciar: «enlace, Ordenanzas fiscales 2027 (PDF)»

Herramientas del navegador

  1. Abrir las herramientas de desarrollo (F12), seleccionar cada enlace y mirar el campo Nombre del panel Accesibilidad.
  2. Comprobar que el nombre sale del contenido (texto más alt de las imágenes) y que se entiende leído de corrido.

Validación automática

  1. axe DevTools (link-name) y WAVE («Empty link») detectan los enlaces sin nombre. axe (image-alt) detecta las imágenes sin atributo alt.
  2. No detectan textos de enlace que son direcciones o nombres de archivo, ni alt como «icono-pdf.svg». WAVE puede avisar de algunos textos sospechosos. La calidad del texto se revisa a mano.

Errores frecuentes en auditorías

  • Usar la dirección o el nombre del archivo 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 texto del enlace, de modo que el lector lo anuncia dos veces. Si el texto basta, el alt va vacío.
  • Indicar el formato o el tamaño del archivo solo con el icono, sin texto alternativo que lo diga.

Para saber más, en nuestro blog

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 H30 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

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:

  1. Comprobar que el elemento a incluye texto o una alternativa textual para el contenido no textual.
  2. Si un elemento img es el único contenido del elemento a, comprobar que su alternativa textual describe el propósito del enlace.
  3. Si el elemento a contiene uno o más elementos img y la alternativa textual de dichos elementos img está vacía, comprobar que el texto del enlace describe el propósito del enlace.
  4. Si el elemento a solo contiene texto, comprobar que el texto describe el propósito del enlace.

Resultados esperados

  • Las comprobaciones anteriores son verdaderas.

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