El problema de los textos genéricos
Los lectores de pantalla permiten a los usuarios pedir una lista de todos los enlaces de la página. Cuando aquella lista contiene «Clica aquí, Clica aquí, Leer más, Leer más, Aquí, Aquí», es completamente inútil. El usuario no sabe donde lleva cada enlace sin leer el contexto que lo rodea.
El criterio WCAG 2.4.4 exige que el propósito de cada enlace pueda ser determinado por el texto del enlace solo, o bien por el texto del enlace combinado con el contexto del programa. El ideal es que el texto del enlace sea descriptivo por sí solo, sin necesidad de contexto.
Ejemplos de buenos y malos textos de enlace
— MAL: genérico y sin contexto —
<a href="/serveis">Clica aquí</a>
<a href="/blog/article">Llegir més</a>
<a href="/contacte">Aquí</a>
— BIEN: descriptivo y autosuficiente —
<a href="/serveis">Veure els nostres serveis d'accessibilitat</a>
<a href="/blog/article">Llegir l'article sobre declaració d'accessibilitat</a>
<a href="/contacte">Contactar amb webaccessible.cat</a>
El caso del ‘Leer más’ en blogs
El texto «Leer más» es uno de los errores más habituales en blogs y listas de artículos. Visualmente tiene sentido porque aparece junto al título y la descripción del artículo. Pero para un lector de pantalla que navega por links, es ambiguo.
Las soluciones sueño:
- Cambiar el texto por uno de descriptivo: «Leer el artículo sobre [título]»
- Añadir texto visualmente oculto dentro del enlace:
<a href="/article">Llegir més
<span class="sr-only">sobre com fer una declaració d'accessibilitat</span>
</a> - Usar aria-label en el enlace:
<a href="/article" aria-label="Llegir més sobre com fer una declaració d'accessibilitat">
Llegir més
</a>
Enlaces vacíos o sin texto
Un error diferente pero relacionado: los enlaces sin ningún texto. A menudo aparecen en iconos de redes sociales o en logos que su links. Un <a href="https://instagram.com/empresa"><img src="instagram.svg"></a>sin alto texto a la imagen es un enlace sin nombre accesible.
La solución: añadir alt text descriptivo a la imagen o aria-label en el enlace:
<a href="https://instagram.com/empresa" aria-label="Segueix-nos a Instagram">
<img src="instagram.svg" alt="">
</a>
Como detectar los errores
La herramienta de autoevaluación de webaccessible.cat detecta automáticamente links sin nombre accesible (link-name). Para los textos genéricos como «Clica aquí», la detección automática es más difícil —la herramienta ve que hay texto, pero no puede saber si es descriptivo. La revisión manual es imprescindible.
Una manera fácil de revisar: activa el lector de pantalla de tu ordenador y navega por los links de la página. Si la lista de links tiene sentido sin contexto, vas bien.
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.