Enllaços accessibles

Introducció

Un problema que veiem cada cop més sovint és el fet que molts dissenyadors eliminen el subratllat dels enllaços per motius estètics. Això normalment implica que el "link" només pot ser reconeixible a través del color i que, per tant, usuaris amb problemes visuals com el daltonisme poden tenir greus problemes per identificar-los enmig d'un text. Un exemple d'enllaç incorrecte seria:

Aquí tenim un enllaç incorrecte

Ús del subratllat: la millor opció

Però què diuen les normes WCAG sobre el tema? Abans de res, les normes destaquen que l'opció més accessible, compartida per tots els usuaris i recomanada és el subratllat. La opció més simple és el propi subratllat per defecte de CSS:

text-decoration: underline;

però tenim moltes altres opcions si, per disseny, volem un subratllat més subtil o menys agressiu.

Una opció interessant és la que fa la revista Wired Magazine que introdueix un subratllat suau i gruixut fent servir un border bottom d'un color més suau:

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

o, si no, també es podria fer el mateix simplement canviant el color del propi underline (tot i que alguns navegadors vells no suporten la propietat i es veuria el subratllat "normal"):

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

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

Amb el resultat:

Una altra opció és la propietat d'ombrejat de la Outside Magazine que fa també un efecte interessant:

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

Resultat:

Alternatives al subratllat

Malgrat tot, però, hi ha dissenys (o dissenyadors) que no volen incorporar el subratllat de cap de les maneres. Com podem, doncs, no marcar els enllaços enmig del text sense saltar-nos la tècnica G182: Ensuring that additional visual cues are available when text color differences are used to convey information i, en general, el criteri 1.4.1 Use of Color? Doncs tenim diverses opcions que passen per indicar l'enllaç amb altres pistes visuals extres al color: modificar el text de l'enllaç perquè sigui en negreta, posar-lo en cursiva o, directament, modificar el tipus de lletra de l'enllaç. Cal anar alerta amb les 2 primeres opcions ja que es pot confondre l'enllaç amb un text negreta/cursiva "normal".

I si, malgrat tot, el disseny (o dissenyador) no ho accepta? Doncs gràcies 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 tenim una darrera opció: utilitzar la lluminositat.

La lluminositat és una propietat que sovint confonem amb el color però que, en realitat, és diferent. Per exemple, el vermell i el rosa són el mateix color amb lluminositats diferents. Per tant, una persona amb problemes per distingir colors pot veure la diferència entre un rosa i un vermell gràcies a la seva diferència de lluminositat. Aplicat al cas dels enllaços, la norma ens diu que és correcte no marcar l'enllaç amb cap pista visual si el text de l'enllaç té un contrast de 3:1 respecte al text "normal" i, addicionalment, afegim una altra de les pistes visuals quan l'enllaç rep el hover o el focus.

Conclusió

Per tant, per resumir. Per tal de distingir els enllaços situats enmig del text la millor opció és sempre el subratllat amb les diferents variants d'estils que hem vist.

En els casos en què, per limitacions de disseny, no ho puguem fer tenim alternatives que són:

• posar l'enllaç en negreta
• posar l'enllaç en cursiva
• posar l'enllaç en un altre tipus de lletra
• posar l'enllaç en un altre color que tingui un contrast de mínim 3:1 respecte a la resta de text i afegir una de les pistes visuals anteriors quan l'enllaç rep focus o hover

En aquest darrer cas cal recordar que ambdós colors (el del text normal i el de l'enllaç) hauran de complir el contrast 4.5:1 que marca el criteri 1.4.3 Contrast (Minimum) per a nivell doble-A o 7:1 del 1.4.6 Contrast (Enhanced) per a nivell triple-A.