Español
Menú del sitio

link-in-text-block

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

automaticWCAG 1.4.1 (A)confianza: highgravedad: seriousperceivable

Comprueba que un enlace dentro de un bloque de texto se distinga visualmente del texto que lo rodea mediante una señal que no sea el color (subrayado, grosor o estilo de fuente, borde, fondo, icono), y pregunta por los enlaces que solo se distinguen por una diferencia de color de >=3:1, que además necesitan una señal al pasar el puntero y al recibir el foco.

Ámbito de aplicación. Se aplica a enlaces (<a href> y elementos cuyo atributo role se resuelve en link: su primer token de rol conocido, sin distinguir mayúsculas de minúsculas, es link) que dibujan texto (texto que no sea espacio en blanco en el árbol plano del enlace y, donde la página tiene maquetación, una caja con algo de área) y cuyo elemento padre inmediato también tiene texto con una letra o un dígito a su lado: un nodo de texto hijo directo, o texto en un elemento en línea de la misma línea que no es un enlace, no se dibuja de forma invisible y no es un elemento de un padre flex o grid (es decir, el enlace está en línea dentro de un bloque de texto, no como elemento independiente, por ejemplo no como único contenido de un <li> de navegación, ni uno de una fila de enlaces separados por "|" o "·"). Un elemento personalizado cuyos ElementInternals le dan el rol link (this.attachInternals().role), sin un atributo role que nombre otro, cuenta como lo hace un elemento nativo con ese rol.

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

  • text-decoration: underline, O
  • un font-weight o font-style distinto del texto circundante, O
  • otra marca visible en el propio enlace: un borde, box-shadow u outline, un color de fondo distinto del circundante, una imagen de fondo, una imagen o svg dentro de él, o un ::before/::after que dibuja algo (contenido propio, o una caja vacía que pinta un fondo, un borde, un outline o una sombra, como hace un subrayado dibujado así), O
  • una marca en todo su contenido: negrita, cursiva, subrayado, borde, un fondo distinto del del texto circundante (una etiqueta de código, <mark>), o elevado o rebajado (el <sup> de una nota al pie).

Un enlace sin ninguno de estos se distingue solo por el color. Cuando su color contrasta con el texto circundante al menos 3:1, la técnica G183 solo se cumple si el paso del puntero y el foco también aportan una señal que no sea el color, algo que un análisis estático no puede ver, así que el enlace se informa como cantTell. Por debajo de 3:1, con un contraste calculable con seguridad, el color es demostrablemente la única señal y el enlace falla. La proporción entre el color del enlace y el del texto no necesita fondo, así que cuando solo el fondo, o un efecto aplicado por igual a ambos, impide medirla, dos colores de texto opacos la deciden igualmente. Margen (contrast-ratio): de entre los enlaces que se distinguen solo por el color y alcanzan 3:1, el más cercano a ese valor, con su proporción sin redondear. Por esos enlaces también se pregunta (la señal al pasar el puntero y al recibir el foco), así que el margen aparece en un resultado cantTell o fail. Solo cuenta como cercano un enlace que está a menos de un 10 % de 3:1 (hasta 3.3:1). measuredCount cuenta los enlaces cuya única señal es el color.

Qué informa un hallazgo.

  • metrics.ratio (un enlace que se distingue solo por el color): el contraste entre el color del texto del enlace y el del texto que lo rodea, como relación (3 para 3:1), frente a metrics.threshold (3).
  • metrics.ratioBeforeOpacity (un enlace que se distingue solo por el color, con ANCESTOR_OPACITY): esa proporción antes de que la opacidad de un ancestro atenúe por igual el enlace y el texto, en lugar de metrics.ratio. La atenuación acerca los dos colores, así que la proporción dibujada puede ser menor: por debajo de 3:1 el enlace falla igualmente, con 3:1 o más se pregunta por él sin inclinarse hacia pass, y no da margen.
  • colors.linkForegroundHex, colors.surroundingTextForegroundHex (un enlace que se distingue solo por el color): el color del texto del enlace y el del texto que lo rodea, en hexadecimal.
  • colorScheme (un enlace con un color de fondo propio, sobre el lienzo de una página que admite claro y oscuro): 'light' o 'dark', el esquema en el que ese fondo no lo distingue del lienzo que lo rodea, cuando sí lo hace en el otro; la proporción y los colores son los de ese esquema. Ausente cuando se queda corto en todos los esquemas medidos.
  • colorSchemesChecked (el mismo enlace): los esquemas en los que se comparó, cuando la página admite ambos y uno no se pudo medir (sus colores o los fondos que lo rodean pueden cambiar con el esquema). Un binding puede volver a analizar con el navegador en el otro esquema.

Estos campos de data.details ayudan a leer y reproducir un hallazgo. Salvo reasonCode y los pocos campos que Esquema de salida indica como estables, no son un contrato estable: un campo puede cambiar de nombre o desaparecer en una versión menor, así que no construyas sobre ellos.

Margen. Esta regla mide contrast-ratio como proporción, y el valor debe alcanzar el umbral. Cuando un resultado correcto quedó cerca del umbral, el campo margin del resultado indica el elemento que más se acercó sin dejar de cumplirlo, así que un resultado que un cambio pequeño haría cambiar se ve antes de que cambie. A diferencia de los campos de un hallazgo, es un contrato estable. Consulta Esquema de salida.

Ejemplos

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

El enlace está subrayado, lo que lo distingue del texto circundante por algo más que el color.

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

La única diferencia con el texto circundante es un cambio de color con un contraste de aproximadamente 1.1:1, muy por debajo del mínimo de 3:1, sin subrayado ni cambio de grosor/estilo.

can't tell
<p style="color:#000000;">Read <a href="#" style="text-decoration:none; color:#d00000;">this link</a> for more information.</p>

El color del enlace contrasta con el texto más de 3:1, pero el color es su única señal. La técnica G183 también necesita una señal que no sea el color al pasar el puntero y al recibir el foco, lo que comprueba una persona.

Cómo comprobarlo

Cuando esta regla no puede decidir, informa cantTell y deja la pregunta a una persona. Cada pregunta que puede plantear aparece aquí bajo su código de motivo, con los pasos para responderla. Un hallazgo lleva los mismos pasos en howToCheck, en el idioma del análisis. Consulta Esquema de salida.

ANCESTOR_OPACITY

  1. Localizar el enlace que indica el informe dentro de su párrafo y observarlo junto al texto que lo rodea.
  2. Comprobar si el enlace se distingue por un subrayado, negrita, cursiva, un borde u otra marca; leer los colores en pantalla, ya que la atenuación los cambia.
  3. Si solo difiere el color, usar el cuentagotas del selector de color de las herramientas para desarrolladores para leer el color del enlace y el del texto tal como se dibujan, y comprobar que su contraste es al menos 3:1.
  4. Después pasar el puntero por encima del enlace y llegar a él con Tab, y comprobar que aparece un subrayado u otra marca que no sea el color.

Se cumple. El enlace tiene una indicación que no es el color, como un subrayado, negrita o un borde, o su color contrasta con el texto al menos 3:1 y al pasar el puntero y al recibir el foco se añade una indicación que no es el color.

No se cumple. El enlace no tiene ninguna indicación que no sea el color y solo el color lo distingue del texto, con menos de 3:1 o sin indicación ajena al color al pasar el puntero y al recibir el foco, lo que incumple WCAG 1.4.1 (F73).

BACKGROUND_FILTER_OR_BACKDROP_FILTER

  1. Localizar el enlace que indica el informe dentro de su párrafo y observarlo junto al texto que lo rodea.
  2. Comprobar si el enlace se distingue por un subrayado, negrita, cursiva, un borde u otra marca; leer los colores en pantalla, ya que el filtro los cambia.
  3. Si solo difiere el color, usar el cuentagotas del selector de color de las herramientas para desarrolladores para leer el color del enlace y el del texto tal como se dibujan, y comprobar que su contraste es al menos 3:1.
  4. Después pasar el puntero por encima del enlace y llegar a él con Tab, y comprobar que aparece un subrayado u otra marca que no sea el color.

Se cumple. El enlace tiene una indicación que no es el color, como un subrayado, negrita o un borde, o su color contrasta con el texto al menos 3:1 y al pasar el puntero y al recibir el foco se añade una indicación que no es el color.

No se cumple. El enlace no tiene ninguna indicación que no sea el color y solo el color lo distingue del texto, con menos de 3:1 o sin indicación ajena al color al pasar el puntero y al recibir el foco, lo que incumple WCAG 1.4.1 (F73).

BACKGROUND_IMAGE_OR_GRADIENT

  1. Localizar el enlace que indica el informe dentro de su párrafo y observarlo junto al texto que lo rodea.
  2. Comprobar si el enlace se distingue por un subrayado, negrita, cursiva, un borde u otra marca, y no solo por su color sobre la imagen de fondo.
  3. Si solo difiere el color, usar el cuentagotas del selector de color de las herramientas para desarrolladores para leer el color del enlace y el del texto tal como se dibujan, y comprobar que su contraste es al menos 3:1.
  4. Después pasar el puntero por encima del enlace y llegar a él con Tab, y comprobar que aparece un subrayado u otra marca que no sea el color.

Se cumple. El enlace tiene una indicación que no es el color, como un subrayado, negrita o un borde, o su color contrasta con el texto al menos 3:1 y al pasar el puntero y al recibir el foco se añade una indicación que no es el color.

No se cumple. El enlace no tiene ninguna indicación que no sea el color y solo el color lo distingue del texto, con menos de 3:1 o sin indicación ajena al color al pasar el puntero y al recibir el foco, lo que incumple WCAG 1.4.1 (F73).

BACKGROUND_NOT_OPAQUE_AT_ROOT

  1. Localizar el enlace que indica el informe dentro de su párrafo; la página no define ningún fondo opaco, así que a su alrededor se ve el lienzo que pinta el navegador o, en un marco, la página que lo rodea.
  2. Visualizar la página donde se muestra: dentro de la página que la inserta, sin colores forzados y en cada esquema de color que admite (claro y oscuro).
  3. En cada configuración, comprobar si el color de fondo del enlace destaca sobre el fondo que lo rodea, o si un subrayado u otra marca que no es el color distingue el enlace.

Se cumple. En todas las configuraciones en que se muestra la página, el fondo del enlace destaca sobre el que lo rodea, u otra marca que no es el color distingue el enlace.

No se cumple. En alguna configuración el fondo del enlace coincide con el que lo rodea y solo una diferencia de color de menos de 3:1 distingue el enlace, lo que incumple WCAG 1.4.1 (F73).

BACKGROUND_OVERLAP

  1. Localizar el enlace que indica el informe dentro de su párrafo y observarlo junto al texto que lo rodea.
  2. Comprobar si el enlace se distingue por un subrayado, negrita, cursiva, un borde u otra marca, y no solo por su color.
  3. Si solo difiere el color, usar el cuentagotas del selector de color de las herramientas para desarrolladores para leer el color del enlace y el del texto tal como se dibujan, y comprobar que su contraste es al menos 3:1.
  4. Después pasar el puntero por encima del enlace y llegar a él con Tab, y comprobar que aparece un subrayado u otra marca que no sea el color.

Se cumple. El enlace tiene una indicación que no es el color, como un subrayado, negrita o un borde, o su color contrasta con el texto al menos 3:1 y al pasar el puntero y al recibir el foco se añade una indicación que no es el color.

No se cumple. El enlace no tiene ninguna indicación que no sea el color y solo el color lo distingue del texto, con menos de 3:1 o sin indicación ajena al color al pasar el puntero y al recibir el foco, lo que incumple WCAG 1.4.1 (F73).

COLOR_NOT_COMPUTABLE

  1. Localizar el enlace que indica el informe dentro de su párrafo y observarlo junto al texto que lo rodea.
  2. Comprobar si el enlace se distingue en pantalla por un subrayado, negrita, cursiva, un borde u otra marca.
  3. Si solo difiere el color, usar el cuentagotas del selector de color de las herramientas para desarrolladores para leer el color del enlace y el del texto tal como se dibujan, y comprobar que su contraste es al menos 3:1.
  4. Después pasar el puntero por encima del enlace y llegar a él con Tab, y comprobar que aparece un subrayado u otra marca que no sea el color.

Se cumple. El enlace tiene una indicación que no es el color, como un subrayado, negrita o un borde, o su color contrasta con el texto al menos 3:1 y al pasar el puntero y al recibir el foco se añade una indicación que no es el color.

No se cumple. El enlace no tiene ninguna indicación que no sea el color y solo el color lo distingue del texto, con menos de 3:1 o sin indicación ajena al color al pasar el puntero y al recibir el foco, lo que incumple WCAG 1.4.1 (F73).

CONTRAST_HELPERS_UNAVAILABLE

  1. Localizar el enlace que indica el informe dentro de su párrafo y observarlo junto al texto que lo rodea.
  2. Comprobar si el enlace se distingue por un subrayado, negrita, cursiva, un borde u otra marca.
  3. Si solo difiere el color, usar el cuentagotas del selector de color de las herramientas para desarrolladores para leer el color del enlace y el del texto tal como se dibujan, y comprobar que su contraste es al menos 3:1.
  4. Después pasar el puntero por encima del enlace y llegar a él con Tab, y comprobar que aparece un subrayado u otra marca que no sea el color.

Se cumple. El enlace tiene una indicación que no es el color, como un subrayado, negrita o un borde, o su color contrasta con el texto al menos 3:1 y al pasar el puntero y al recibir el foco se añade una indicación que no es el color.

No se cumple. El enlace no tiene ninguna indicación que no sea el color y solo el color lo distingue del texto, con menos de 3:1 o sin indicación ajena al color al pasar el puntero y al recibir el foco, lo que incumple WCAG 1.4.1 (F73).

ELEMENT_OPACITY

  1. Localizar el enlace que indica el informe dentro de su párrafo y observarlo junto al texto que lo rodea.
  2. Comprobar si el enlace se distingue por un subrayado, negrita, cursiva, un borde u otra marca; leer su color en pantalla, ya que su propia opacidad lo cambia.
  3. Si solo difiere el color, usar el cuentagotas del selector de color de las herramientas para desarrolladores para leer el color del enlace y el del texto tal como se dibujan, y comprobar que su contraste es al menos 3:1.
  4. Después pasar el puntero por encima del enlace y llegar a él con Tab, y comprobar que aparece un subrayado u otra marca que no sea el color.

Se cumple. El enlace tiene una indicación que no es el color, como un subrayado, negrita o un borde, o su color contrasta con el texto al menos 3:1 y al pasar el puntero y al recibir el foco se añade una indicación que no es el color.

No se cumple. El enlace no tiene ninguna indicación que no sea el color y solo el color lo distingue del texto, con menos de 3:1 o sin indicación ajena al color al pasar el puntero y al recibir el foco, lo que incumple WCAG 1.4.1 (F73).

ENGINE_EXCEPTION

  1. Localizar el enlace que indica el informe dentro de su párrafo y observarlo junto al texto que lo rodea.
  2. Comprobar si el enlace se distingue por un subrayado, negrita, cursiva, un borde u otra marca.
  3. Si solo difiere el color, usar el cuentagotas del selector de color de las herramientas para desarrolladores para leer el color del enlace y el del texto tal como se dibujan, y comprobar que su contraste es al menos 3:1.
  4. Después pasar el puntero por encima del enlace y llegar a él con Tab, y comprobar que aparece un subrayado u otra marca que no sea el color.

Se cumple. El enlace tiene una indicación que no es el color, como un subrayado, negrita o un borde, o su color contrasta con el texto al menos 3:1 y al pasar el puntero y al recibir el foco se añade una indicación que no es el color.

No se cumple. El enlace no tiene ninguna indicación que no sea el color y solo el color lo distingue del texto, con menos de 3:1 o sin indicación ajena al color al pasar el puntero y al recibir el foco, lo que incumple WCAG 1.4.1 (F73).

  1. Localizar el enlace que indica el informe dentro de su párrafo; el informe da su contraste con el texto que lo rodea.
  2. Pasar el puntero por encima del enlace y comprobar si aparece un subrayado u otra marca que no sea el color.
  3. Hacer clic justo antes del enlace y pulsar Tab hasta que tenga el foco, y volver a comprobar si hay una marca que no sea el color.

Se cumple. Tanto al pasar el puntero como al recibir el foco, el enlace añade una indicación que no es el color, como un subrayado.

No se cumple. Al pasar el puntero o al recibir el foco solo cambia el color, así que solo el color distingue el enlace, lo que incumple WCAG 1.4.1 (G183, F73).

MIX_BLEND_MODE

  1. Localizar el enlace que indica el informe dentro de su párrafo y observarlo junto al texto que lo rodea.
  2. Comprobar si el enlace se distingue por un subrayado, negrita, cursiva, un borde u otra marca; leer los colores en pantalla, ya que la fusión los cambia.
  3. Si solo difiere el color, usar el cuentagotas del selector de color de las herramientas para desarrolladores para leer el color del enlace y el del texto tal como se dibujan, y comprobar que su contraste es al menos 3:1.
  4. Después pasar el puntero por encima del enlace y llegar a él con Tab, y comprobar que aparece un subrayado u otra marca que no sea el color.

Se cumple. El enlace tiene una indicación que no es el color, como un subrayado, negrita o un borde, o su color contrasta con el texto al menos 3:1 y al pasar el puntero y al recibir el foco se añade una indicación que no es el color.

No se cumple. El enlace no tiene ninguna indicación que no sea el color y solo el color lo distingue del texto, con menos de 3:1 o sin indicación ajena al color al pasar el puntero y al recibir el foco, lo que incumple WCAG 1.4.1 (F73).

PSEUDO_ELEMENT_COLOR

  1. Localizar el enlace que indica el informe dentro de su párrafo y observarlo junto al texto que lo rodea.
  2. Comprobar si el enlace se distingue por un subrayado, negrita, cursiva, un borde u otra marca; si está en la primera línea o la primera letra del párrafo, compararlo con el texto de esa línea.
  3. Si solo difiere el color, usar el cuentagotas del selector de color de las herramientas para desarrolladores para leer el color del enlace y el del texto tal como se dibujan, y comprobar que su contraste es al menos 3:1.
  4. Después pasar el puntero por encima del enlace y llegar a él con Tab, y comprobar que aparece un subrayado u otra marca que no sea el color.

Se cumple. El enlace tiene una indicación que no es el color, como un subrayado, negrita o un borde, o su color contrasta con el texto al menos 3:1 y al pasar el puntero y al recibir el foco se añade una indicación que no es el color.

No se cumple. El enlace no tiene ninguna indicación que no sea el color y solo el color lo distingue del texto, con menos de 3:1 o sin indicación ajena al color al pasar el puntero y al recibir el foco, lo que incumple WCAG 1.4.1 (F73).

SELECT_OPTION_COLOR

  1. Localizar la lista desplegable que indica el informe y abrir su lista de opciones.
  2. Observar la opción que indica el informe junto al texto de las demás opciones.
  3. Comprobar si se distingue por algo distinto del color (un subrayado, negrita, una marca); si solo difiere el color, leer ambos colores con el cuentagotas del selector de color y comprobar que el contraste es al menos 3:1.

Se cumple. La opción se distingue por una indicación que no es el color, o su color contrasta con el resto del texto al menos 3:1 y al recibir el foco tiene una indicación que no es el color.

No se cumple. Solo el color distingue la opción, por debajo de 3:1 o sin otra indicación, lo que incumple WCAG 1.4.1 (F73).

TEXT_DECORATION_NOT_RESOLVABLE

  1. Localizar el enlace que indica el informe dentro de su párrafo y observarlo junto al texto que lo rodea.
  2. Comprobar si el enlace aparece subrayado en pantalla, o se distingue por negrita, cursiva, un borde u otra marca.
  3. Si solo difiere el color, usar el cuentagotas del selector de color de las herramientas para desarrolladores para leer el color del enlace y el del texto tal como se dibujan, y comprobar que su contraste es al menos 3:1.
  4. Después pasar el puntero por encima del enlace y llegar a él con Tab, y comprobar que aparece un subrayado u otra marca que no sea el color.

Se cumple. El enlace tiene una indicación que no es el color, como un subrayado, negrita o un borde, o su color contrasta con el texto al menos 3:1 y al pasar el puntero y al recibir el foco se añade una indicación que no es el color.

No se cumple. El enlace no tiene ninguna indicación que no sea el color y solo el color lo distingue del texto, con menos de 3:1 o sin indicación ajena al color al pasar el puntero y al recibir el foco, lo que incumple WCAG 1.4.1 (F73).

TEXT_SHADOW

  1. Localizar el enlace que indica el informe dentro de su párrafo y observarlo junto al texto que lo rodea.
  2. Comprobar si el enlace se distingue por un subrayado, negrita, cursiva, un borde u otra marca; una sombra compartida con el texto no cuenta.
  3. Si solo difiere el color, usar el cuentagotas del selector de color de las herramientas para desarrolladores para leer el color del enlace y el del texto tal como se dibujan, y comprobar que su contraste es al menos 3:1.
  4. Después pasar el puntero por encima del enlace y llegar a él con Tab, y comprobar que aparece un subrayado u otra marca que no sea el color.

Se cumple. El enlace tiene una indicación que no es el color, como un subrayado, negrita o un borde, o su color contrasta con el texto al menos 3:1 y al pasar el puntero y al recibir el foco se añade una indicación que no es el color.

No se cumple. El enlace no tiene ninguna indicación que no sea el color y solo el color lo distingue del texto, con menos de 3:1 o sin indicación ajena al color al pasar el puntero y al recibir el foco, lo que incumple WCAG 1.4.1 (F73).

TEXT_STROKE

  1. Localizar el enlace que indica el informe dentro de su párrafo y observarlo junto al texto que lo rodea.
  2. Comprobar si el enlace se distingue por un subrayado, negrita, cursiva, un borde u otra marca; leer los colores en pantalla, donde se dibuja el trazo.
  3. Si solo difiere el color, usar el cuentagotas del selector de color de las herramientas para desarrolladores para leer el color del enlace y el del texto tal como se dibujan, y comprobar que su contraste es al menos 3:1.
  4. Después pasar el puntero por encima del enlace y llegar a él con Tab, y comprobar que aparece un subrayado u otra marca que no sea el color.

Se cumple. El enlace tiene una indicación que no es el color, como un subrayado, negrita o un borde, o su color contrasta con el texto al menos 3:1 y al pasar el puntero y al recibir el foco se añade una indicación que no es el color.

No se cumple. El enlace no tiene ninguna indicación que no sea el color y solo el color lo distingue del texto, con menos de 3:1 o sin indicación ajena al color al pasar el puntero y al recibir el foco, lo que incumple WCAG 1.4.1 (F73).

Ver código fuente