Enlaces accesibles

Introducción

Un problema que vemos cada vez más a menudo es el hecho de que muchos diseñadores eliminan el subrayado de los enlaces por motivos estéticos. Esto normalmente implica que el link solamente es reconocible a través del color y que, por tanto, usuarios con problemas visuales como el daltonismo pueden tener graves problemas para identificarlos en medio de un texto. Un ejemplo de enlace incorrecto sería: 

Aquí tenemos un enlace incorrecto

Uso del subrayado: la mejor opción

Pero qué dicen las normas WCAG sobre el tema? Antes que nada, las normas destacan que la opción más accesible, compartida por todos los usuarios y recomendada, es el subrayado. La opción más simple es el propio subrayado por defecto de CSS:

pero tenemos muchas otras opciones si, por diseño, queremos un subrayado más sutil o menos agresivo.

Una opción interesante es la que hace la revista Wired Magazine que introduce un subrayado suave y grueso usando un border bottom de un color más suave:

a {
  text-decoration: none;
  border-bottom: 3px solid #b4e7f8;
}

o, si no, también se podría hacer lo mismo simplemente cambiando el color del propio underline (aunque algunos navegadores viejos no soportan la propiedad y se vería el subrayado "normal"):

text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: #8cc8ff;

// o la versió comprimida:
 text-decoration: underline solid #8cc8ff;

Con el resultado:

Otra opción es la propiedad de sombreado de la Outside Magazine que hace también un efecto interesante:

a {
  text-decoration: none;
  box-shadow: inset 0 -3px 0 -1px #ffd204;
}

Resultado:

Alternativas al subrayado

A pesar de todo, hay diseños (o diseñadores) que no quieren incorporar el subrayado. Cómo podemos, pues, no marcar los enlaces en medio del texto sin saltarnos la técnica G182: Ensuring that additional visual cues are available when text color differences are used to convey information y, en general, el criterio 1.4.1 Use of Color? Pues tenemos varias opciones que pasan por indicar el enlace con otras pistas visuales extras al color: modificar el texto del enlace para que sea en negrita, ponerlo en cursiva o, directamente, modificar el tipo de letra del enlace. Hace falta estar alerta con las 2 primeras opciones ya que se puede confundir el enlace con un texto en negrita/cursiva "normal".

Y si, a pesar de todo, el diseño (o diseñador) no lo acepta? Pues gracias a G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them tenemos una última opción: utilizar la luminosidad.

La luminosidad es una propiedad que a menudo confundimos con el color pero que, en realidad, es diferente. Por ejemplo, el rojo y el rosa son el mismo color con luminosidades diferentes. Por tanto, una persona con problemas para distinguir colores puede ver la diferencia entre un rosa y un rojo gracias a su diferencia de luminosidad. Aplicado en el caso de los enlaces, la norma nos dice que es correcto no marcar el enlace con una pista visual si el texto del enlace tiene un contraste de 3:1 respecto al texto "normal" y, adicionalmente, añadimos otra de las pistas visuales cuando en enlace recibe el hover o el foco.

Por tanto, parar resumir. Para distinguir los enlaces situados en medio del texto la mejor opción es siempre el subrayado con las distintas variantes de estilos que hemos visto.

En los casos que, por limitaciones de diseño, no lo podamos hacer tenemos alternativas que son:

• poner el enlace en negrita
• poner el enlace en cursiva
• poner el enlace en otro tipo de letra
• poner el enlace en otro color que tenga un contraste de mínimo 3:1 respecto al resto del texto y añadir una de las pistas visuales anteriores cuando en enlace recibe foco o hover

En este último caso hay que recordar que ambos colores (el del texto normal y el del enlace) deberán cumplir el contraste 4.5:1 que marca el criterio 1.4.3 Contrast (Minimum) para nivel doble-A o 7:1 del 1.4.6 Contrast (Enhanced) para nivel triple-A.