Icones, emojis, SVG i CAPTCHA

No tot el contingut no textual és una fotografia amb la seva etiqueta <img>. Les icones de fonts, els emojis, els gràfics SVG en línia i els CAPTCHA són contingut no textual amb els seus propis paranys, i en tots quatre casos el criteri 1.1.1 Contingut no textual s'aplica igual. Aquesta lliçó repassa com tractar-los des de la redacció i el disseny, amb el codi que convé demanar a l'equip de desenvolupament.

Icones

Les icones s'insereixen de diverses maneres: com a imatge, com a SVG en línia, com a font d'icones (Font Awesome, Material Icons) o com a caràcter Unicode. La pregunta és sempre la mateixa: és decorativa o transmet informació o una funció?

• Icona decorativa al costat d'un text: la icona d'un telèfon davant de «Telèfon: 968 00 00 00». S'ha d'amagar a la tecnologia de suport: alt="" si és una imatge, aria-hidden="true" si és una font d'icones o un SVG.
• Icona que és l'únic contingut d'un botó o d'un enllaç: necessita un nom accessible: aria-label al botó, text ocult visualment o <title> a l'SVG.
• Icona que aporta informació sense text: una marca de verificació verda que vol dir «disponible»: necessita una alternativa textual («Disponible»).

<!-- Incorrecte: botó sense nom, el lector dirà només «botó» -->
<button><i class="fa fa-search"></i></button>

<!-- Correcte: icona oculta, nom al botó -->
<button aria-label="Cercar">
  <i class="fa fa-search" aria-hidden="true"></i>
</button>

<!-- Encara millor: text visible -->
<button>
  <i class="fa fa-search" aria-hidden="true"></i> Cercar
</button>

Les fonts d'icones tenen un problema afegit: si la persona usuària força la seva pròpia tipografia (habitual amb dislèxia o baixa visió), la icona es pot convertir en un quadrat. Per això avui l'SVG és l'opció preferida. Les icones informatives també han de complir 1.4.11 Contrast no textual (3:1).

Emojis

Els lectors de pantalla llegeixen els emojis amb el seu nom Unicode: «cara somrient amb ulls somrients», «foc», «mans aplaudint». Un text amb cinc emojis seguits es converteix en una frase llarguíssima; un emoji fet servir en lloc d'una paraula en pot canviar el sentit. Regles pràctiques:

• Fes servir pocs emojis i col·loca'ls al final de la frase, no al mig ni substituint paraules.
• No repeteixis el mateix emoji diverses vegades seguides.
• No facis servir emojis com a pics de llista ni com a únic indicador d'estat (un cercle verd o vermell sense text).
• Evita els «textos decorats» amb caràcters Unicode especials (𝓵𝓵𝓮𝓽𝓻𝓮𝓼 𝓮𝓷 𝓬𝓾𝓻𝓼𝓲𝓿𝓪, lletres invertides): el lector de pantalla els llegeix com a símbols matemàtics, un per un, o no els llegeix gens.
• En HTML, un emoji amb significat es pot embolcallar en <span role="img" aria-label="advertència">⚠️</span> per controlar el que s'anuncia.

SVG

El format SVG és ideal per a icones, logotips i gràfics perquè s'escala sense perdre nitidesa i, si els seus colors fan servir currentColor, s'adapta al mode de contrast forçat. Però la seva accessibilitat depèn de com s'insereixi:

• Com a <img src="icono.svg">: es tracta com qualsevol imatge; mana l'alt.
• SVG en línia (<svg> dins de l'HTML): si és informatiu, afegeix-hi role="img" i un <title> com a primer fill, vinculat amb aria-labelledby; per a una descripció més llarga, <desc>. Si és decoratiu, aria-hidden="true" i focusable="false" (aquest últim evita que algunes versions de navegadors li donin el focus).

<!-- SVG informatiu en línia -->
<svg role="img" aria-labelledby="t1" viewBox="0 0 24 24">
  <title id="t1">Accessible per a persones en cadira de rodes</title>
  <path d="…"/>
</svg>

<!-- SVG decoratiu en línia -->
<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">…</svg>

Per a un gràfic SVG complex (una gràfica generada amb D3, un mapa) s'aplica el que vas veure a la lliçó anterior: una alternativa textual estructurada fora de l'SVG, perquè la navegació per l'interior d'un SVG amb lector de pantalla és poc fiable.

CAPTCHA

Un CAPTCHA (prova per distingir persones de robots) és, per definició, contingut no textual que no es pot descriure sense anul·lar-ne la funció. El criteri 1.1.1 el contempla com a excepció, però amb dues condicions: ha de tenir una alternativa textual que n'identifiqui el propòsit («Prova de verificació que ets una persona») i s'han d'oferir versions alternatives en diferents modalitats sensorials (per exemple, imatge i àudio) per atendre diferents discapacitats.

A la pràctica, els CAPTCHA de text distorsionat són una barrera enorme: exclouen les persones cegues (si no hi ha àudio), les persones amb baixa visió i dislèxia (la distorsió està pensada per dificultar la lectura) i les persones sordcegues (no els serveixen ni la imatge ni l'àudio). Les alternatives d'àudio solen ser gairebé inintel·ligibles. Opcions millors, de més a menys recomanable:

1. Verificació sense interacció: anàlisi del comportament al costat del servidor, camps parany invisibles (honeypot), límits de freqüència. No cal resoldre res.
2. Verificació amb un sol clic («No soc un robot»), que recorre a un repte només en casos dubtosos i ofereix alternativa d'àudio i assistència.
3. Preguntes lògiques senzilles («Quant fan tres més quatre?») amb text real, tot i que poden ser una barrera cognitiva.
4. CAPTCHA d'imatge amb àudio: l'última opció, mai l'única.

Tingues en compte també el criteri 3.3.8 Autenticació accessible (mínim), nou a les WCAG 2.2: cap pas d'autenticació no pot exigir una prova de funció cognitiva (recordar, transcriure, resoldre un trencaclosques) sense alternativa, excepte el reconeixement d'objectes o de contingut personal. Un CAPTCHA que demana transcriure text distorsionat en un inici de sessió incompleix aquest criteri; un de «selecciona les imatges amb semàfors» entra dins de l'excepció, tot i que continua sent una barrera per a les persones cegues que s'ha de cobrir amb una altra alternativa.

Resum

• Icones decoratives: aria-hidden="true"; icones funcionals soles en un botó: nom accessible amb aria-label o text; és preferible l'SVG a les fonts d'icones.
• Emojis: pocs, al final, sense substituir paraules ni servir de pics; res de textos amb caràcters Unicode decoratius.
• SVG en línia informatiu: role="img" i <title>; decoratiu: aria-hidden="true".
• CAPTCHA: 1.1.1 exigeix identificar-ne el propòsit i oferir alternatives en diferents modalitats; 3.3.8 prohibeix les proves cognitives sense alternativa en l'autenticació.
• La millor alternativa al CAPTCHA és no necessitar-lo: camps parany, límits de freqüència i verificació al costat del servidor.