Principio 1/1.4 Distinguible/1.4.1-B

De WCAG Wiki

1.4.1-B. Diferenciar los enlaces del texto circundante

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

Enunciado del criterio (Observatorio de Accesibilidad Web)

  • Los enlaces no se deben diferenciar del texto que los rodea únicamente mediante el color o al menos tienen un contraste de 3:1 con el texto que los rodea y se deben emplear pistas visuales adicionales cuando reciben el foco.

Comprensión del criterio

Descripción resumida

Los enlaces dentro de un párrafo no pueden distinguirse únicamente por el color.

Si solo se usa color, deben cumplirse dos requisitos:

  • Contraste mínimo 3:1 entre el enlace y el texto adyacente.
  • Se deben añadir pistas visuales adicionales (subrayado, negrita u otra señal) cuando el enlace recibe foco o interacción.

Objetivo

Garantizar que los usuarios con baja visión o daltonismo distingan claramente los enlaces del resto del texto, especialmente en contenido en línea.

Importancia de cumplir el criterio

Si la diferenciación depende solo del color, los usuarios con baja visión o déficit de color pueden no identificar enlaces, afectando navegación y comprensión. Las pistas visuales complementarias evitan la ambigüedad y mejoran la usabilidad.

Referencias WCAG

Recursos de apoyo

Consejos
  • Comprobar contraste mínimo 3:1 con el texto cercano.
  • Aplicar subrayado, negrita u otras señales visuales al enfocar/enlazar.
  • Evitar enlaces indistinguibles del texto, incluso si la persona no percibe color.
  • Usar cambios visuales consistentes en hover y focus.

Evaluación del criterio

Tipo de evaluación

Evaluación Semiautomática

Procedimiento de evaluación

Usa la herramienta ‘’’Colour Contrast Analyser’’’
  1. Paso 1. Localizar todos los enlaces que están rodeados de texto.
  2. Paso 2. Comprobar que presentan un contraste de al menos 3:1 con el texto que lo rodea.
    • a. Pulsar en el icono en la sección “Foreground colour” y seleccionar el color del enlace en la página.
    • b. Pulsar en el icono en la sección “Background colour” y seleccionar el color del texto adyacente en la página.
    • c. Comprobar que el “Contrast ratio” que aparece junto a “WCAG 2.1 results” es superior a 3:1.
  3. Paso 3. Verificar que se muestran otras pistas visuales (subrayado, negrita…) cuando el enlace obtiene el foco con el ratón.
  4. Paso 4. Verificar que se muestran otras pistas visuales (subrayado, negrita…) cuando el enlace obtiene el foco a través del teclado.

Resultado esperado

Los enlaces son distinguibles del texto adyacente mediante color con contraste adecuado y señales adicionales al recibir foco.

Ejemplo

En el código CSS se indica que el enlace esté subrallado. HTML: 

<p>Visita nuestra <a href="#">página de ayuda</a> para más información.</p>

CSS: 

a {
  text-decoration: underline;
}

Otras herramientas de evaluación

  • Inspección del navegador: comprobar que los enlaces se distinguen del texto circundante no solo por el color (p. ej., subrayado, estilo de texto, ícono) y que conservan un indicador visible al pasar el foco.
  • Navegación por teclado: recorrer la página con Tab para verificar que los enlaces muestran una pista visual clara de foco.
  • Filtros de visión / sin estilos: activar simuladores de daltonismo o desactivar CSS para confirmar que los enlaces siguen siendo identificables por más de un atributo visual.










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 1.4.1-B. Diferenciar los enlaces del texto circundante

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.4_Distinguible/1.4.1-B&oldid=3437»