Fallo común WCAG 2.2
F84Enlaces «Más» o «Haga clic aquí» que no se entienden solos
Nombre oficial en el W3C: Fallo del criterio de conformidad 2.4.9 debido a usar un enlace no específico como «haga clic aquí» o «más» sin un mecanismo para cambiar el texto del enlace por un texto específico
En pocas palabras
Este fallo ocurre cuando un enlace dice solo «Más», «Leer más» o «Haga clic aquí». Para saber adónde lleva hay que leer el párrafo de alrededor. El criterio 2.4.9, de nivel AAA, pide que cada enlace se entienda por su texto, o que la página permita cambiarlo por uno descriptivo.
Por qué es importante
Muchas personas ciegas no escuchan la página entera. Abren con su lector de pantalla una lista con todos los enlaces y eligen desde ahí. Si la lista dice «Más, Más, Haga clic aquí», no les sirve.
Pasa lo mismo al recorrer la página con Tab: solo se oye el texto del enlace. Las personas con dificultades cognitivas también agradecen enlaces que dicen adónde llevan.
Cómo evitarlo
- Escriba enlaces que nombren su destino: «Consultar las ayudas al alquiler», no «Más».
- En las tarjetas de noticias, enlace el titular en lugar de añadir un «Leer más».
- Si el diseño exige un «Leer más», complételo con texto oculto a la vista que el lector de pantalla sí lee. El texto visible debe ir primero: «Leer más sobre las ayudas al alquiler».
- No confíe en el atributo
title. Muchos lectores de pantalla no lo anuncian. - El criterio también admite otra vía: un botón que cambie todos los enlaces genéricos de la página por textos descriptivos.
Ejemplo práctico
Es el fallo típico de los bloques de noticias, avisos y servicios en las webs municipales y de empresa. Cada resumen acaba con un enlace «Más» o «Haga clic aquí». Su destino solo se entiende leyendo el párrafo.
Así no: Enlaces «Más» y «Haga clic aquí»
Para saber adónde lleva cada enlace hay que leer el titular y el párrafo. En la lista de enlaces del lector de pantalla, o al pulsar Tab, solo se oye «Más» y «Haga clic aquí». No se sabe a qué noticia corresponde cada uno. Esto incumple el criterio 2.4.9 (nivel AAA).
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Ver el código del ejemplo incorrecto
<style>
.noticias article { border-bottom: 1px solid #ccc; padding: 8px 0; }
.noticias h3 { margin: 0 0 4px; font-size: 1.05rem; color: #0B2239; }
.noticias p { margin: 0; }
.noticias a { color: #412c56; }
</style>
<section class="noticias" aria-labelledby="tit-noticias">
<h2 id="tit-noticias">Noticias del Ayuntamiento</h2>
<article>
<h3>Ayudas al alquiler para jóvenes</h3>
<p>Abierto el plazo de solicitud hasta el 15 de noviembre. <a href="#">Más</a></p>
</article>
<article>
<h3>Nuevo horario de la biblioteca municipal</h3>
<p>Abre también los sábados por la tarde. <a href="#">Haga clic aquí</a></p>
</article>
</section>Así sí: Enlaces que se entienden por sí solos
Cada enlace nombra ahora su destino. La lista de enlaces y la navegación con Tab muestran «Más sobre las ayudas al alquiler para jóvenes» y «Consultar el nuevo horario de la biblioteca». Se entienden sin leer el párrafo.
Pruébelo aquí:
Ver el código del ejemplo correcto
<style>
.noticias article { border-bottom: 1px solid #ccc; padding: 8px 0; }
.noticias h3 { margin: 0 0 4px; font-size: 1.05rem; color: #0B2239; }
.noticias p { margin: 0; }
.noticias a { color: #412c56; }
</style>
<section class="noticias" aria-labelledby="tit-noticias">
<h2 id="tit-noticias">Noticias del Ayuntamiento</h2>
<article>
<h3>Ayudas al alquiler para jóvenes</h3>
<p>Abierto el plazo de solicitud hasta el 15 de noviembre. <a href="#">Más sobre las ayudas al alquiler para jóvenes</a></p>
</article>
<article>
<h3>Nuevo horario de la biblioteca municipal</h3>
<p>Abre también los sábados por la tarde. <a href="#">Consultar el nuevo horario de la biblioteca</a></p>
</article>
</section>Cómo comprobarlo
Errores frecuentes en auditorías
- Tarjetas de noticias o de productos con el mismo botón «Leer más» o «Ver más» en todas.
- Enlaces «aquí» o «este enlace» en medio de un párrafo: «para pedir cita pulse aquí».
- Completar el texto con un title. La mayoría de lectores de pantalla no lo anuncian de forma fiable y no aparece en la lista de enlaces.
- Usar un aria-label que no contiene el texto visible («Leer más» con aria-label="Ayudas al alquiler"). Además incumple el criterio 2.5.3.
Para saber más, en nuestro blog
-
Guía para crear correos electrónicos accesiblesEste artículo explica como hacer un correo electrónico más accesible e inclusivo para todo tipo de personas y como beneficia a todos el hacerlo.
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 F84 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
HTML
Descripción
Este fallo describe una situación habitual en la que se usan enlaces como «click here» (haga clic aquí) o «more» (más) como elementos de anclaje cuando se necesita el texto circundante para entender su propósito y no existe ningún mecanismo que permita aclarar el destino por sí solo, como un botón para expandir el texto del enlace.
Muchas personas ciegas que usan lectores de pantalla abren un cuadro de diálogo con la lista de enlaces de la página. Usan esa lista de enlaces para decidir a dónde ir. Pero si muchos de los enlaces de esa lista dicen simplemente «click here» o «more», no podrán usar esa función de su lector de pantalla, que es una estrategia de navegación fundamental. Por eso es un fallo del criterio de conformidad 2.4.9 Propósito de los enlaces (sólo enlaces) no proporcionar ninguna forma de que conozcan el destino únicamente a partir del texto del enlace. Lo mismo ocurre con las personas que recorren los enlaces con el tabulador. Si todo lo que oyen al tabular por el documento es «click here, click here, click here, etc.», se confundirán.
Ejemplos
<a href="file110.html">Click here</a> for more information on the Rocky Mountains.<h2>News headlines</h2>
<p>Bishops Tickle Darwin's Monkey Theory</p>
<a href="btdmt.html">read more</a>Pruebas
Procedimiento
- Examinar cada enlace de la página.
- Comprobar si tiene un texto de enlace poco descriptivo, como «click here» (haga clic aquí) o «more» (más), cuyo propósito puede determinarse a partir del texto circundante pero no únicamente a partir del texto del enlace.
- Comprobar si existe en la página un mecanismo que convierta todos los enlaces poco descriptivos de la página en enlaces descriptivos.
Resultados esperados
- Si la comprobación n.º 2 es verdadera Y la comprobación n.º 3 es falsa, se da esta condición de fallo y el contenido falla el criterio de conformidad.
Cómo lo comprobamos en ADDAW
Este error es uno de los que buscamos en cada auditoría de ADDAW. Se lo entregamos con capturas y la forma de corregirlo.
Basado en la técnica F84 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.