La accesibilidad web es crucial para garantizar que todas las personas puedan navegar sin obstáculos. Uno de los errores más comunes es el uso de enlaces genéricos como «haga clic aquí» o «más», lo que dificulta la navegación para usuarios con discapacidades visuales que dependen de lectores de pantalla.
Este problema está identificado como F84 en WCAG 2.1 y viola el Criterio de Conformidad 2.4.9: Propósito del enlace (solo enlace). Este criterio exige que los enlaces sean comprensibles por sí mismos sin depender del contexto circundante.
Acerca de este fallo
El fallo F84 ocurre cuando los enlaces utilizan textos vagos como «haga clic aquí», «leer más», o «ver más», sin un mecanismo que haga su propósito claro de forma independiente.
Problemas que causa este fallo:
- Los usuarios de lectores de pantalla no pueden identificar el propósito del enlace al listar los enlaces en una página.
- Los usuarios que navegan con teclado se confunden al saltar de un enlace a otro sin contexto claro.
- Afecta la usabilidad y la experiencia de usuario, especialmente en sitios con múltiples enlaces sin descripción.
Escenarios comunes del fallo:
- Enlaces en artículos o noticias con el texto «leer más» sin contexto adicional.
- Botones o llamadas a la acción con «haga clic aquí» sin indicar su propósito.
- Listas de enlaces repetitivos que solo dicen «más información».
Ejemplos
Ejemplo incorrecto 1: Uso de «haga clic aquí»
<p>Para descargar el informe completo, <a href=»informe.pdf»>haga clic aquí</a>.</p>
🚨 Problema: El propósito del enlace no es claro si se extrae de su contexto.
Solución correcta: Texto de enlace descriptivo
<p>Descarga el <a href=»informe.pdf»>informe completo en PDF</a>.</p>
✅ ¿Qué mejora?: El enlace indica exactamente qué recurso se va a descargar.
Ejemplo incorrecto 2: Uso de «leer más» en artículos
<h2>Beneficios de la accesibilidad web</h2>
<p>La accesibilidad mejora la usabilidad y la inclusión digital…</p>
<a href=»accesibilidad.html»>Leer más</a>
🚨 Problema: Si hay varios enlaces similares, los usuarios no saben cuál es cuál.
Solución correcta: Especificar el contenido del enlace
<h2>Beneficios de la accesibilidad web</h2>
<p>La accesibilidad mejora la usabilidad y la inclusión digital…</p>
<a href=»accesibilidad.html»>Leer más sobre accesibilidad web</a>
✅ ¿Qué mejora?: Ahora el enlace es descriptivo y se entiende sin necesidad de contexto adicional.
Ejemplo correcto: Solución ideal
<ul>
<li><a href=»producto-a.html»>Ver detalles del Producto A</a></li>
<li><a href=»producto-b.html»>Ver detalles del Producto B</a></li>
<li><a href=»producto-c.html»>Ver detalles del Producto C</a></li>
</ul>
✅ ¿Qué mejora?:
- Los enlaces son claros y específicos.
- Se entiende su propósito sin necesidad de contexto adicional.
- Mejora la experiencia de navegación con teclado y lectores de pantalla.
Errores comunes y cómo evitarlos
Errores frecuentes:
- Usar enlaces como «haga clic aquí» o «leer más» sin contexto.
- Crear botones o llamados a la acción con «ver más» sin detalles adicionales.
- No ofrecer alternativas para usuarios de tecnologías de asistencia.
Cómo evitar estos errores:
- Redactar enlaces descriptivos que indiquen su propósito claramente.
- Incluir palabras clave en los enlaces para mejorar accesibilidad y SEO.
- Evitar frases genéricas y asegurarse de que el enlace sea comprensible sin leer el contenido circundante.
Preguntas frecuentes sobre el fallo F84
¿Por qué los enlaces genéricos son un problema de accesibilidad?
Porque los usuarios de lectores de pantalla no pueden entender su propósito sin contexto adicional.
¿Es obligatorio escribir enlaces completos en cada caso?
Sí, especialmente cuando los enlaces deben ser comprensibles por sí mismos.
¿Puedo usar «leer más» si agrego un atributo aria-label?
Sí, pero lo ideal es que el texto del enlace sea claro sin depender de atributos adicionales.
¿Cómo pruebo si mis enlaces son accesibles?
Usa un lector de pantalla y revisa si los enlaces tienen sentido sin leer el texto circundante.
¿Mejora el SEO escribir enlaces más descriptivos?
Sí. Los enlaces descriptivos ayudan a los motores de búsqueda a comprender mejor el contenido.
¿Qué hacer si ya tengo muchos enlaces genéricos en mi sitio?
Revisarlos y reemplazarlos progresivamente con versiones descriptivas para mejorar la accesibilidad.
Recursos relacionados
- Guía oficial WCAG 2.1 para el fallo común F84: Incumplimiento del Criterio de Conformidad 2.4.9 debido al uso de un enlace no específico como «haga clic aquí» o «más» sin un mecanismo para cambiar el texto del enlace a un texto específico.
- Comprender el criterio de éxito 2.4.9: Propósito del enlace (solo enlace)
Pruebas y validación
Procedimiento
- Revisa todos los enlaces de la página.
- Verifica si alguno usa texto como «haga clic aquí», «más» o «leer más».
- Comprueba si el enlace se entiende por sí mismo sin contexto adicional.
Resultados esperados
- ✅ Si todos los enlaces son descriptivos, la página cumple con WCAG 2.1.
- ❌ Si hay enlaces genéricos sin contexto, la página debe corregirse.
Garantizar que los enlaces sean claros y descriptivos no solo mejora la accesibilidad, sino también la usabilidad y el SEO. Al evitar el fallo F84, ayudas a que más personas, incluidas aquellas con discapacidades visuales, naveguen sin dificultades.
🚀 ¿Necesitas ayuda para hacer tu sitio web más accesible? Contáctanos para una auditoría de accesibilidad web. 💡