link-in-text-block

Los enlaces dentro de bloques de texto deben distinguirse del texto circundante sin depender únicamente del color

Comprueba que un enlace dentro de un fragmento de texto se distinga visualmente del texto circundante mediante subrayado, una diferencia de grosor/estilo de fuente, o una diferencia de contraste de color suficiente (>=3:1), y no solo mediante el color.

Ámbito de aplicación. Se aplica a elementos <a href> cuyo elemento padre inmediato también tiene al menos un nodo de texto hijo directo con contenido que no sea solo espacio en blanco (es decir, el enlace está en línea dentro de un fragmento de texto plano, no como elemento independiente, por ejemplo, no como único contenido de un elemento <li> de navegación).

Resultado esperado. Un enlace dentro de un bloque de texto debe distinguirse visualmente del texto circundante mediante al menos un medio que no sea el color:

• text-decoration: underline, O
• un font-weight distinto al del texto circundante, O
• un font-style distinto al del texto circundante, O
• una relación de contraste de al menos 3:1 entre el color del texto del enlace y el color del texto circundante (el umbral de la técnica G183 de WCAG; un contraste suficiente por sí solo es una alternativa aceptada al subrayado).

La regla devuelve `fail` únicamente cuando no se cumple ninguna de las condiciones anteriores y el contraste de color entre el enlace y el texto circundante se puede calcular con fiabilidad y es inferior a 3:1, es decir, cuando el color es demostrablemente la única señal.

Ejemplos

<p>Read <a href="#" style="text-decoration:underline">this underlined link</a> for more information.</p>

<p style="color:#222222;">Read <a href="#" style="text-decoration:none; color:#2a2a2a;">this link</a> for more information.</p>

Ver código fuente