Fallo común WCAG 2.2
F73Enlaces dentro del texto que solo se distinguen por el color
Nombre oficial en el W3C: Fallo del criterio de conformidad 1.4.1 debido a crear enlaces que no son visualmente evidentes sin visión del color
En pocas palabras
Este fallo ocurre cuando los enlaces de un párrafo no llevan subrayado ni otra marca y solo se distinguen por su color. Quien no percibe bien los colores no sabe que ahí hay un enlace. Hace falta una pista que no dependa del color, visible siempre y no solo al pasar el ratón.
Por qué es importante
Muchas personas no distinguen ciertos colores: personas con daltonismo, con baja visión o mayores. También influye una pantalla con poco brillo o al sol.
Si los enlaces solo cambian de color, esas personas no los encuentran. Pueden pasar por alto la política de devoluciones o el enlace para descargar las bases de una convocatoria.
Cómo evitarlo
- Mantenga el subrayado en los enlaces que están dentro de un texto.
- Si lo quita, use otra marca visible siempre: negrita, un borde inferior claro o un icono.
- Otra opción válida: que el enlace contraste al menos 3:1 con el texto que lo rodea y muestre una marca extra al pasar el ratón o recibir el foco.
- No deje el subrayado solo para
:hovero:focus: la pista debe verse antes. - Revise los estilos generales del tema, como
a { text-decoration: none; }.
Ejemplo práctico
Se ve a diario en textos legales, condiciones de envío, fichas de producto y noticias. El diseño quita el subrayado a los enlaces de un párrafo y deja como única pista un color muy parecido al del texto.
Así no: Enlaces sin subrayado y de color casi igual al texto
Los enlaces solo se diferencian por el tono: lila oscuro (#412c56) frente a un texto casi negro (#0B2239). La diferencia de luminosidad es de apenas 1,3:1. Sin percibir el color, o con poco brillo, no se sabe que hay enlaces. El subrayado solo aparece al pasar el ratón o con el foco, y eso sigue siendo un fallo.
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Ver el código del ejemplo incorrecto
<style>
.envio { color: #0B2239; line-height: 1.5; }
.envio a { color: #412c56; text-decoration: none; }
.envio a:hover, .envio a:focus { text-decoration: underline; }
</style>
<h2>Envíos y devoluciones</h2>
<p class="envio">
Los pedidos se entregan en 24-48 horas laborables en la Península.
Consulte las <a href="#">tarifas de envío</a> y la
<a href="#">política de devoluciones</a> antes de finalizar la compra.
Si tiene dudas, escriba a <a href="#">atención al cliente</a>.
</p>Así sí: Enlaces subrayados siempre
Se mantiene el color, pero los enlaces llevan subrayado siempre. Es una pista visual que no depende del color. Al pasar el ratón o con el foco, el subrayado se hace más grueso como refuerzo. El foco conserva además el contorno del navegador.
Pruébelo aquí:
Ver el código del ejemplo correcto
<style>
.envio { color: #0B2239; line-height: 1.5; }
.envio a { color: #412c56; text-decoration: underline; }
.envio a:hover, .envio a:focus { text-decoration-thickness: 2px; }
</style>
<h2>Envíos y devoluciones</h2>
<p class="envio">
Los pedidos se entregan en 24-48 horas laborables en la Península.
Consulte las <a href="#">tarifas de envío</a> y la
<a href="#">política de devoluciones</a> antes de finalizar la compra.
Si tiene dudas, escriba a <a href="#">atención al cliente</a>.
</p>Cómo comprobarlo
Errores frecuentes en auditorías
- Un reset de CSS o un tema de WordPress con a { text-decoration: none; } para todo el sitio, incluidos los enlaces del contenido.
- Mostrar el subrayado solo con :hover. No ayuda a quien no usa ratón ni a quien aún no ha pasado el puntero por el enlace.
- Elegir para los enlaces un color corporativo oscuro que contrasta bien con el fondo, pero muy poco con el texto negro o gris oscuro.
- Cambiar el subrayado por un borde inferior muy fino y claro que apenas se ve.
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 F73 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
Cualquier tecnología.
Descripción
El objetivo de este fallo es evitar situaciones en las que las personas que no pueden percibir las diferencias de color no puedan identificar los enlaces (cuando las personas con visión del color sí pueden identificarlos). Se requiere el subrayado de los enlaces o alguna otra distinción visual que no se base en el color (cuando los enlaces son discernibles para quienes tienen visión del color).
Aunque algunos enlaces pueden ser visualmente evidentes por el diseño y el contexto de la página, como los enlaces de navegación, los enlaces dentro de un texto a menudo solo se reconocen visualmente por sus propios atributos de presentación. Eliminar el subrayado y dejar únicamente la diferencia de color en esos enlaces sería un fallo, porque no habría ninguna otra indicación visual (aparte del color) de que se trata de un enlace.
El rojo y el rosa son el mismo color (tono), pero tienen distinta luminosidad (que no es color). Así que el rojo y el rosa cumplirían el requisito de «no distinguirse únicamente por el color (tono)», puesto que difieren en luminosidad (que no es color), siempre que la diferencia de luminosidad (contraste) sea de 3:1 o superior. Por ejemplo, si el texto circundante es rojo y el enlace es rosa, cumpliría. De forma similar, un verde claro y un rojo oscuro difieren tanto en color como en luminosidad, por lo que cumplirían si la diferencia de contraste (luminosidad) es de 3:1 o superior antes de recibir el foco o de señalarlos con el puntero.
No se exige que los enlaces sean identificables por las personas que no pueden percibir el color si tampoco son perceptibles para quienes tienen visión del color (p. ej., si los enlaces están ocultos para todo el mundo, como en un juego o en un examen).
Si la pista no basada en el color solo aparece cuando el ratón pasa por encima del enlace o cuando el enlace recibe el foco, sigue siendo un fallo.
Si el enlace tiene un color distinto y además está en negrita, no fallaría, porque la negrita no depende del color.
Ejemplos
Enlaces sin subrayado y con un contraste similar al del texto del cuerpo
Una página web incluye un gran número de enlaces dentro del texto del cuerpo. Los enlaces están estilizados de modo que no tienen subrayado y su color es muy similar al del texto del cuerpo. Esto sería un fallo porque los usuarios no podrían diferenciar los enlaces del texto del cuerpo.
Eliminar el subrayado de un enlace en una frase o párrafo sin proporcionar otra pista visual aparte del color
<head>
<style>
p a:link {text-decoration: none}
p a:visited {text-decoration: none}
p a:active {text-decoration: none}
p a:hover {text-decoration: underline; color: red;}
</style>
</head>
<body>
<p>There are many resources to find out more about the
<a href="rain-in-spain.html">rain in Spain</a>.
</p>
</body>Si la pista visual solo se proporciona al pasar el ratón por encima (como en el ejemplo anterior), seguiría fallando.
Pruebas
Procedimiento
- Comprobar que cada enlace de la página que es identificable por el color (tono) también es identificable visualmente por algún otro medio (p. ej., subrayado, negrita, cursiva, una diferencia suficiente de luminosidad, etc.).
Resultados esperados
- Si la comprobación n.º 1 es falsa, se da esta condición de fallo y el contenido falla este 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 F73 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.