Discapacitat visual: ceguesa, baixa visió i daltonisme

La discapacitat visual és la més associada a l'accessibilitat web, però és molt més diversa del que se sol pensar. Només una petita part de les persones amb discapacitat visual són cegues totals; la majoria té resta visual i fa servir la vista, amb ajudes, per navegar. En aquesta lliçó veuràs tres perfils molt diferents entre si i les tecnologies que fa servir cadascun.

Ceguesa i lectors de pantalla

Una persona cega accedeix a l'ordinador o al mòbil mitjançant un lector de pantalla: un programari que converteix en veu sintètica (o en braille) el que hi ha a la pantalla. No «veu» la pàgina: la recorre de manera lineal o salta entre elements per tipus. Els lectors més utilitzats són NVDA (gratuït, per a Windows), JAWS (comercial, Windows), VoiceOver (integrat a macOS i iOS), TalkBack (Android) i Narrador (Windows). Com en canvia l'ús en una pantalla tàctil ho veuràs a la lliçó dedicada al mòbil.

És important entendre com navega un lector de pantalla, perquè explica gairebé totes les regles de l'accessibilitat:

• Llegeix l'arbre d'accessibilitat que construeix el navegador a partir de l'HTML, no els píxels. Si alguna cosa només existeix com a imatge o com a estil CSS, no la percep.
• Permet saltar per encapçalaments (tecla H a NVDA i JAWS), per enllaços, per formularis i per regions (landmarks). Una pàgina sense encapçalaments és com un llibre sense índex.
• Anuncia cada element amb el seu nom, funció i estat: «Envia, botó», «Accepto les condicions, casella, no marcada». Si un control no té nom, només dirà «botó».
• Llegeix les imatges a través del text alternatiu (alt). Sense aquest text, dirà el nom del fitxer o res.

<!-- El que sent, aproximadament, un usuari de NVDA -->
<img src="grafico-ventas.png">            → "grafico-ventas.png, gràfic"
<img src="grafico-ventas.png" alt="">     → (res, s'ignora)
<img src="grafico-ventas.png"
     alt="Vendes 2025: 1,2 milions, un 15 % més que el 2024">
                                           → "Vendes 2025: 1,2 milions…, gràfic"

Els criteris WCAG més directament lligats a aquest perfil són l'1.1.1 Contingut no textual, l'1.3.1 Informació i relacions, el 2.4.1 Evitar blocs, el 2.4.6 Encapçalaments i etiquetes i el 4.1.2 Nom, funció, valor.

Baixa visió: ampliació i contrast

La baixa visió abasta des de la miopia severa fins a patologies com la degeneració macular, el glaucoma, la retinosi pigmentària o la retinopatia diabètica. Cadascuna afecta d'una manera diferent: pèrdua de visió central, de visió perifèrica, visió borrosa, sensibilitat a l'enlluernament. És el perfil més nombrós dins de la discapacitat visual i creix amb l'edat.

Les ajudes habituals són:

• Zoom del navegador (Ctrl++), fins al 200 % o el 400 %. El web ha de continuar sent usable sense desplaçament horitzontal: criteris 1.4.10 Reajustament dels elements i 1.4.4 Canvi de mida del text.
• Ampliadors de pantalla com ZoomText, la Lupa de Windows o el Zoom de macOS, que amplien una porció de la pantalla. L'usuari veu una «finestra» petita del contingut, per la qual cosa els missatges que apareixen lluny del punt d'atenció passen desapercebuts.
• Alt contrast o modes de color invertits del sistema operatiu. El disseny ha de respectar aquests ajustos i no dependre d'imatges de fons per a informació essencial.
• Augment de l'espaiat del text amb fulls d'estil propis: criteri 1.4.12 Espaiat del text.

Per a aquest perfil, el contrast és decisiu: l'1.4.3 Contrast (mínim) exigeix una relació de com a mínim 4,5:1 per al text normal i 3:1 per al text gran; l'1.4.11 Contrast no textual exigeix 3:1 per als components d'interfície i els gràfics informatius.

Daltonisme i percepció del color

El daltonisme (discromatòpsia) afecta al voltant del 8 % dels homes i el 0,5 % de les dones. La forma més comuna és la dificultat per distingir el vermell i el verd; menys freqüents són la confusió blau-groc i l'absència total de color. No és una discapacitat visual greu en la vida diària, però en un web pot deixar sense informació milions de persones.

El criteri 1.4.1 Ús del color estableix que el color no ha de ser l'únic mitjà visual per transmetre informació, indicar una acció o distingir un element. Exemples d'incompliment:

• Un camp obligatori assenyalat només amb una vora vermella.
• Un gràfic de línies la llegenda del qual distingeix les sèries únicament pel color.
• Un enllaç dins d'un paràgraf que només es diferencia per ser blau, sense subratllat ni cap altre indicador.
• Un calendari on els dies disponibles són verds i els ocupats, vermells.

La solució és la redundància: color més text, més icona, més subratllat, més patró. No es tracta d'eliminar el color, sinó de no dependre'n.

Com comprovar-ho

• Navega amb NVDA (gratuït) només amb el teclat i comprova que sents noms útils a les imatges, els botons i els camps.
• Amplia al 400 % en una finestra de 1.280 píxels d'amplada i verifica que no apareix desplaçament horitzontal.
• Fes servir un analitzador de contrast i simuladors de daltonisme (els tenen les eines de desenvolupament de Chrome i Firefox).

Resum

• El lector de pantalla llegeix la semàntica del codi: noms, rols, estats, encapçalaments i textos alternatius.
• La baixa visió és el perfil més nombrós: necessita zoom, redistribució del contingut, contrast i missatges a prop del punt d'atenció.
• El daltonisme afecta prop del 8 % dels homes; el color no ha de ser mai l'únic canal d'informació (1.4.1).
• Criteris clau: 1.1.1, 1.3.1, 1.4.1, 1.4.3, 1.4.4, 1.4.10, 1.4.11, 2.4.6 i 4.1.2.