La accesibilidad web es esencial para garantizar que todos los usuarios, incluidas las personas con discapacidades visuales o daltonismo, puedan navegar por la web sin barreras. Un problema recurrente es el uso exclusivo del color para diferenciar enlaces dentro del contenido, lo que afecta a las personas que no pueden percibir diferencias cromáticas.
Este fallo común, identificado como F73 en WCAG 2.1, compromete el cumplimiento del Criterio de Conformidad 1.4.1: «Uso del color». Se estima que aproximadamente el 8% de los hombres y el 0.5% de las mujeres tienen algún tipo de daltonismo, lo que dificulta la percepción de enlaces si no cuentan con otras señales visuales.
Acerca de este fallo
El fallo F73 ocurre cuando un enlace se distingue únicamente por el color dentro de un bloque de texto, sin otras señales visuales como subrayado, negrita o cambio de tipografía. Esto afecta negativamente la navegación de personas con deficiencia en la percepción de colores, ya que pueden no notar la diferencia entre el texto normal y el enlace.
Escenarios comunes del fallo:
- Enlaces dentro de párrafos sin subrayado ni otros estilos distintivos.
- Menús de navegación donde los enlaces solo se diferencian por color.
- Enlaces en listas que no incluyen iconos, negrita u otros indicadores.
Ejemplos
Ejemplo incorrecto 1: Enlaces sin subrayado ni diferencia de grosor
<head>
<style>
p a { color: blue; text-decoration: none; }
</style>
</head>
<body>
<p>Para más información, visita nuestra <a href="contacto.html">página de contacto</a>.</p>
</body>
🔴 Problema: El enlace se distingue solo por color, lo que no es suficiente para usuarios con daltonismo.
Solución correcta: Uso de subrayado
<head>
<style>
p a { color: blue; text-decoration: underline; }
</style>
</head>
<body>
<p>Para más información, visita nuestra <a href="contacto.html">página de contacto</a>.</p>
</body>
✅ ¿Qué mejora?: El enlace es distinguible por subrayado, facilitando su identificación para todos los usuarios.
Ejemplo incorrecto 2: Diferencia solo en color con cambio en hover
<head>
<style>
a { color: green; text-decoration: none; }
a:hover { text-decoration: underline; color: red; }
</style>
</head>
<body>
<p>Más detalles en nuestro <a href="servicios.html">catálogo de servicios</a>.</p>
</body>🔴 Problema:
- El enlace solo se resalta al pasar el cursor sobre él.
- Los usuarios de lectores de pantalla o aquellos que navegan sin mouse no perciben la diferencia.
Solución correcta: Negrita + subrayado
<head>
<style>
a { color: green; font-weight: bold; text-decoration: underline; }
</style>
</head>
<body>
<p>Más detalles en nuestro <a href="servicios.html">catálogo de servicios</a>.</p>
</body>✅ ¿Qué mejora?: Negrita + subrayado, proporcionando un distintivo visual adicional.
Ejemplo correcto: Solución ideal
<head>
<style>
a { color: #0056b3; text-decoration: underline; font-weight: bold; }
a:focus, a:hover { background-color: yellow; }
</style>
</head>
<body>
<p>Consulta nuestras <a href="ayuda.html">preguntas frecuentes</a> para más información.</p>
</body>
✅ ¿Qué mejora?:
- Subrayado por defecto.
- Cambio de fondo en hover y focus para una mejor experiencia accesible.
Errores comunes y cómo evitarlos
Errores frecuentes:
- No usar subrayado en los enlaces dentro del contenido.
- Depender únicamente del color para diferenciar los enlaces.
- Aplicar estilos visuales solo en hover sin alternativas en estado normal.
Cómo evitar estos errores:
- Siempre usar subrayado o negrita en los enlaces.
- Asegurar que los enlaces sean fácilmente identificables sin depender del color.
- Proporcionar estilos adicionales en hover y focus, como cambios de fondo o bordes.
Preguntas frecuentes sobre el fallo F73
¿Por qué no es suficiente cambiar el color de los enlaces?
Porque las personas con daltonismo pueden no notar la diferencia. Se necesita un cambio adicional como subrayado o negrita.
¿Es obligatorio el subrayado en todos los enlaces?
No, pero es altamente recomendado en enlaces dentro de párrafos. En menús o botones, otros estilos pueden ser suficientes.
¿Qué pasa si el subrayado afecta el diseño?
Se pueden usar otras señales visuales, como negrita, iconos o un cambio de fondo en focus/hover.
¿Cómo se prueba si los enlaces cumplen con WCAG?
Utiliza herramientas de simulación de daltonismo o elimina los colores con filtros de accesibilidad en navegadores.
¿Los enlaces en imágenes también deben cumplir esta regla?
Sí, pero en ese caso la imagen debe tener un atributo alt descriptivo.
Recursos relacionados
- Guía oficial WCAG 2.1 para el fallo común F73: Incumplimiento del Criterio de Conformidad 1.4.1 debido a la creación de vínculos que no son visualmente evidentes sin visión de color
- Comprender el criterio de éxito 1.4.1: Uso del color
- G182: Garantizar que haya señales visuales adicionales disponibles cuando se utilizan diferencias de color en el texto para transmitir información
- G183: Utilizar una relación de contraste de 3:1 con el texto circundante y proporcionar señales visuales adicionales al pasar el mouse sobre enlaces o controles donde solo se utiliza el color para identificarlos
Pruebas y validación
Procedimiento
- Revisa si los enlaces en el texto se diferencian solo por color.
- Verifica si tienen subrayado, negrita o iconos.
- Asegura que los estilos de hover y focus no sean la única señal visual.
Resultados esperados
- ✅ Si los enlaces tienen señales visuales adicionales, el contenido cumple con WCAG 2.1.
- ❌ Si solo dependen del color, el contenido falla el criterio 1.4.1 y debe corregirse.
Garantizar que los enlaces sean visibles sin depender del color es clave para una web accesible. Aplicar subrayado, negrita o cambios de fondo ayuda a todos los usuarios a navegar mejor.
🚀 ¿Necesitas ayuda para mejorar la accesibilidad de tu sitio web? Contáctanos para una auditoría y optimización accesible. 💡