Pauta 1.4 Distingible: contrast, canvi de mida, reflow, espaiat, imatges de text i contingut en passar el punter

La pauta 1.4 agrupa els criteris que més afecten les persones amb baixa visió, que són moltes més que les persones cegues. Diversos d'aquests criteris tenen llindars numèrics que cal mesurar amb precisió, i tots tenen excepcions que convé conèixer per no reportar fallades inexistents. Aquesta lliçó recorre els criteris de nivell A i AA de la pauta, amb les seves mesures, proves i fallades típiques.

1.4.1 Ús del color (A)

El color no pot ser l'únic mitjà visual per transmetre informació, indicar una acció, demanar una resposta o distingir un element. Casos freqüents: enllaços dins del text distingits només pel color (han de tenir subratllat o una altra marca, o un contrast de 3:1 amb el text del voltant més un indicador en passar el punter o en rebre el focus); camps amb error només en vermell; llegendes de gràfics només per color; estats de pestanya o filtre només pel fons. Prova: posa la pàgina en escala de grisos (eines de desenvolupament, emulació de deficiències visuals) i comprova que la informació continua allà.

1.4.2 Control de l'àudio (A)

Si un àudio sona automàticament més de tres segons, s'ha de poder posar en pausa o aturar, o se n'ha de poder controlar el volum de manera independent del sistema. És un dels quatre criteris de no interferència: afecta tota la pàgina encara que l'àudio vingui d'un tercer.

1.4.3 Contrast (mínim) (AA) i 1.4.6 Contrast (millorat) (AAA)

Text i imatges de text: ràtio mínima 4,5:1; text gran (almenys 18 pt, o 14 pt en negreta; aproximadament 24 px, o 18,66 px en negreta) 3:1. Excepcions: text de controls inactius, text purament decoratiu, text en imatges on no és rellevant, i logotips o noms de marca. A nivell AAA, 7:1 i 4,5:1 respectivament.

Com mesurar: comptagotes sobre el color real del text i del fons tal com es renderitzen (no els valors de la guia d'estil, que poden diferir per opacitat, superposicions o antialiasing). Mesura en tots els estats: normal, hover, focus, visitat, deshabilitat (exempt, però convé anotar-ho), placeholder (no exempt), text sobre imatge en el punt més desfavorable.

Fallades típiques: grisos clars en textos secundaris (#999 sobre blanc dona 2,8:1), placeholders, text blanc sobre colors corporatius clars, enllaços al peu sobre fons fosc, text sobre fotografies sense capa d'enfosquiment, text de botons secundaris.

1.4.4 Canvi de mida del text (AA)

El text s'ha de poder ampliar fins al 200 % sense tecnologia de suport i sense pèrdua de contingut o funcionalitat. Normalment es compleix amb el zoom del navegador, però falla quan hi ha altures fixes que tallen el text, contenidors amb overflow: hidden, textos en botons que desborden, o mides en píxels en elements que no escalen. També es considera habitualment una fallada (i axe ho marca amb la regla meta-viewport) que el lloc bloquegi el zoom al mòbil amb user-scalable=no o maximum-scale=1 al viewport, encara que alguns navegadors ignorin aquesta restricció.

1.4.5 Imatges de text (AA)

Si la mateixa presentació visual es pot aconseguir amb text real, no s'ha de fer servir una imatge de text, tret que l'usuari la pugui personalitzar o que sigui essencial (logotips). Bàners amb text incrustat, botons com a imatges, capçaleres amb tipografia «especial» en PNG. Avui, amb fonts web, gairebé mai no hi ha justificació. Les imatges de text, a més, han de complir l'1.1.1 (alt amb el mateix text) i l'1.4.3.

1.4.10 Reajustament dels elements (AA)

El contingut s'ha de presentar sense pèrdua d'informació ni de funcionalitat i sense requerir desplaçament en dues dimensions per a: contingut amb desplaçament vertical a una amplada equivalent a 320 píxels CSS; contingut amb desplaçament horitzontal a una altura equivalent a 256 píxels CSS. Excepció: parts del contingut que requereixen un disseny bidimensional per a l'ús o el significat (imatges, mapes, diagrames, vídeo, jocs, presentacions, taules de dades, interfícies on cal mantenir visibles barres d'eines mentre es manipula el contingut).

Prova: finestra de 1280 px amb zoom al 400 %, o viewport de 320 px a les eines de desenvolupament. Fallades: desplaçament horitzontal per elements d'amplada fixa, menús que no es pleguen, taules de maquetació, modals més amples que la pantalla, contingut tallat per overflow. Les taules de dades estan exemptes del desplaçament bidimensional, però les seves cel·les han de continuar sent llegibles.

1.4.11 Contrast no textual (AA)

Ràtio mínima de 3:1 respecte als colors adjacents per a: (a) la informació visual necessària per identificar components d'interfície i els seus estats (vores de camps, indicador de focus, casella marcada, estat seleccionat), tret de components inactius o l'aparença dels quals determina l'agent d'usuari sense modificació de l'autor; i (b) les parts d'objectes gràfics necessàries per entendre el contingut (línies d'un gràfic, icones informatives), tret que una presentació concreta sigui essencial.

Matisos importants: no s'exigeix contrast d'un botó respecte al seu fons si el botó té un text amb contrast suficient que l'identifica (el text ja marca el component); sí que s'exigeix per a un camp de text l'únic indicador del qual és la vora, i per a l'indicador de focus. En gràfics, es mesura cada element necessari (barres, sectors adjacents entre si si no hi ha separador ni etiqueta).

1.4.12 Espaiat del text (AA)

Si s'apliquen, sense canviar res més, un interlineat d'almenys 1,5 vegades la mida de la lletra, un espai després dels paràgrafs d'almenys 2 vegades, un espaiat entre lletres d'almenys 0,12 em i entre paraules d'almenys 0,16 em, no s'ha de perdre contingut ni funcionalitat. S'aplica a llengües i sistemes d'escriptura que admeten aquestes propietats. Prova: bookmarklet o full d'estil d'usuari. Fallades: textos que desborden contenidors d'altura fixa, botons amb el text tallat, menús horitzontals que se superposen, tooltips truncats.

* {
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}
p { margin-bottom: 2em !important; }

1.4.13 Contingut en passar el cursor (hover) o en rebre el focus (AA)

Quan apareix contingut addicional en passar el punter o en rebre el focus (tooltips, submenús, targetes de previsualització) i desapareix en retirar-lo, ha de complir tres condicions: descartable (es pot amagar sense moure el punter ni el focus, normalment amb Escapada, tret que no amagui res ni sigui un error d'entrada); apuntable (si apareix en passar el punter, el punter es pot moure sobre el contingut nou sense que desaparegui); i persistent (es manté fins que es retira el punter o el focus, es descarta o deixa de ser vàlid). Excepció: contingut controlat per l'agent d'usuari, com el title natiu.

Fallades típiques: tooltips personalitzats que es tanquen en moure el punter cap a ells (les persones amb ampliador no els poden llegir), submenús que no es tanquen amb Escapada, previsualitzacions que desapareixen al cap d'uns segons.

Resum

• 1.4.1: el color no és l'únic mitjà; els enllaços dins del text necessiten alguna cosa més que el color. 1.4.2: àudio automàtic > 3 s controlable (no interferència).
• 1.4.3: 4,5:1 text normal, 3:1 text gran, mesurat sobre colors renderitzats i en tots els estats; excepcions: inactius, decoratius, logotips.
• 1.4.4 (200 %), 1.4.10 (320 px / 400 %) i 1.4.12 (espaiat) són tres proves diferents; l'1.4.5 prohibeix les imatges de text evitables.
• 1.4.11: 3:1 per als indicadors de components i estats (vores, focus) i per a les parts informatives dels gràfics.
• 1.4.13: el contingut en hover o focus ha de ser descartable, apuntable i persistent.