Tanquem el Mòdul 1 amb una idea: abans d'aplicar un sol criteri de WCAG necessitem entendre les persones per a les quals dissenyem. Aquest és el primer pas. En aquesta lliçó farem un panorama de les discapacitats rellevants per a la web, agrupades pel tipus de capacitat afectada: visuals, auditives, motrius/físiques, cognitives i d'aprenentatge, de la parla i neurològiques. Per a cada grup veurem què implica i, sobretot, quines barreres troba aquesta persona en un lloc web mal construït —descrites a alt nivell, encara sense la solució tècnica—. Recuperarem el model permanent / temporal / situacional de la lliçó 01-02 aplicant-lo a cada grup, i l'aterrarem en escenaris concrets de persones fent servir Cursalia.
Dos advertiments d'abast. Primer: aquí descrivim les persones i les seves barreres, no les eines que utilitzen (els lectors de pantalla, magnificadors, etc., són la lliçó 02-02) ni com hi naveguen (02-03). Segon: no donarem la solució de codi; el "com s'arregla" són els mòduls 3, 4 i 5. Aquí construïm l'empatia i el diagnòstic que donaran sentit a tota la resta.
Contingut
- Per què agrupar les discapacitats (i un advertiment)
- Discapacitats visuals
- Discapacitats auditives
- Discapacitats motrius i físiques
- Discapacitats cognitives i d'aprenentatge
- Discapacitats de la parla
- Discapacitats neurològiques i altres
- El model permanent / temporal / situacional aplicat
- Per què agrupar les discapacitats (i un advertiment)
Agrupem les discapacitats per capacitat afectada perquè és la forma més útil per al disseny: el que ens importa com a creadors de web no és un diagnòstic mèdic, sinó quin canal d'interacció queda limitat (veure, sentir, moure, processar, parlar) i, per tant, quines barreres hem d'evitar.
Abans de començar, tres matisos imprescindibles:
- No són compartiments estancs. Una mateixa persona pot pertànyer a diversos grups (per exemple, sordceguesa, o una persona gran amb baixa visió i tremolor a les mans).
- Hi ha un enorme espectre de graus. "Discapacitat visual" abasta des d'una lleu dificultat de contrast fins a la ceguesa total. La majoria de les persones estan en algun punt intermedi.
- Fem servir un llenguatge centrat en la persona. Diem "persona cega" o "persona amb baixa visió", no etiquetes que redueixin algú a la seva condició. El respecte també es dissenya.
mindmap
root((Discapacitats<br/>i la web))
Visuals
Ceguesa
Baixa visió
Daltonisme
Auditives
Sordesa
Hipoacúsia
Motrius/Físiques
Mobilitat reduïda
Tremolor
Amputació
No ús de ratolí
Cognitives/Aprenentatge
Dislèxia
TDAH
Autisme
Memòria
Discalcúlia
De la parla
Neurològiques/altres
Epilèpsia fotosensible
- Discapacitats visuals
Afecten el canal visual, el més utilitzat per consumir la web. Dins del grup hi ha realitats molt diferents:
- Ceguesa. Absència total o gairebé total de visió. Aquestes persones no perceben res de la pantalla: accedeixen al contingut a través de l'oïda (àudio) o el tacte (braille), mitjançant tecnologies d'assistència. El disseny purament visual els és invisible.
- Baixa visió. Visió molt reduïda que no es corregeix amb ulleres: agudesa baixa, camp visual reduït (visió "de túnel" o pèrdua central), sensibilitat a l'enlluernament. Solen fer servir la vista, però necessiten ampliar, augmentar el contrast o reorganitzar el contingut.
- Daltonisme i deficiències de percepció del color. La persona hi veu, però no distingeix certs colors (el més comú, confondre vermells i verds). Afecta al voltant del 8% dels homes.
Barreres típiques a la web (a alt nivell):
- Imatges, icones o gràfics sense alternativa textual: per a una persona cega, senzillament no existeixen.
- Contrast insuficient entre text i fons: illegible per a baixa visió.
- Text que no es pot ampliar sense trencar la pàgina o que obliga a fer scroll horitzontal.
- Informació transmesa només pel color: "els camps en vermell són obligatoris", "el curs en verd està disponible". Qui no distingeix el color perd el missatge.
- Interfícies que depenen de la posició o la forma visual sense cap etiqueta que les anomeni.
Escenari Cursalia. La Marta és cega i vol apuntar-se a un curs. Al catàleg, cada curs és una targeta amb una imatge atractiva i un botó. Si aquestes imatges no tenen descripció i el botó s'anomena només "Veure més" repetit quaranta vegades, la Marta sent una llista de "Veure més, Veure més, Veure més…" sense saber a quin curs pertany cadascun. La barrera no és la seva ceguesa: és el disseny.
- Discapacitats auditives
Afecten el canal auditiu. Amb la web cada cop més audiovisual (vídeo-lliçons, podcasts, notificacions sonores), el seu impacte ha crescut.
- Sordesa. Pèrdua auditiva profunda o total. Moltes persones sordes es comuniquen en llengua de signes, que és la seva llengua natural; el text escrit en l'idioma oral pot ser per a elles una segona llengua, cosa que convé recordar en redactar.
- Hipoacúsia. Pèrdua auditiva parcial. La persona pot sentir alguna cosa, potser amb audiòfons, però perd matisos, paraules en entorns sorollosos o àudios de baixa qualitat.
Barreres típiques a la web:
- Vídeo sense subtítols: tot el contingut parlat es perd.
- Àudio o podcast sense transcripció: no hi ha manera alternativa d'accedir al missatge.
- Informació important donada només pel so (una alerta que "pita" en enviar un formulari) sense equivalent visual.
- Vídeos amb subtítols automàtics de mala qualitat, plens d'errors, que confonen més que ajuden.
Escenari Cursalia. En Diego és sord i mira una vídeo-lliçó del reproductor de Cursalia. El professor explica un concepte clau parlant a càmera. Sense subtítols ni transcripció, en Diego veu una persona movent els llavis durant dotze minuts: el contingut educatiu, que és el que ha pagat, li resulta inaccessible.
- Discapacitats motrius i físiques
Afecten la capacitat de moure's i manipular els dispositius d'entrada (ratolí, teclat, pantalla tàctil). Són molt variades:
- Mobilitat reduïda a mans o braços (per lesió medul·lar, paràlisi, artritis, esclerosi…).
- Tremolor o manca de precisió (pàrkinson, tremolor essencial): dificulta apuntar i fer clic en objectius petits.
- Amputació o absència de membres.
- Impossibilitat de fer servir el ratolí, ja sigui per l'anterior o per fatiga; moltes d'aquestes persones naveguen només amb teclat o amb dispositius alternatius.
El punt comú d'aquest grup: la interacció amb precisió i velocitat és difícil o impossible, i sovint el ratolí queda descartat.
Barreres típiques a la web:
- Funcions que només s'activen amb el ratolí (menús que s'obren "en passar-hi per sobre", arrossegar i deixar anar sense alternativa): qui navega amb teclat queda exclòs.
- Objectius tàctils o de clic diminuts o molt junts: impossibles d'encertar amb tremolor.
- Límits de temps per completar tasques (un formulari que "caduca") que no donen marge a qui es mou més a poc a poc.
- Ordre de navegació caòtic: si en prémer el Tabulador el focus salta de manera il·lògica, recórrer la pàgina es torna esgotador.
Escenari Cursalia. La Lucía té una lesió medul·lar i navega només amb teclat. Vol matricular-se. Arriba al formulari tabulant, omple els camps… però el desplegable per triar la forma de pagament només s'obre en fer clic amb el ratolí, i el botó final "Confirmar matrícula" no rep el focus del teclat. La Lucía arriba fins a l'últim pas i no pot acabar. (Veurem aquesta escena a fons a 02-03.)
- Discapacitats cognitives i d'aprenentatge
És el grup més ampli i divers, i sovint el més oblidat perquè és "invisible". Afecta com es processa, comprèn, recorda o atén la informació. Alguns exemples:
- Dislèxia. Dificultat amb la lectura i el processament del text (no amb la intel·ligència). Els blocs llargs, les tipografies atapeïdes o justificades l'agreugen.
- TDAH. Dificultat per mantenir l'atenció; els elements que distreuen (animacions, carrusels, anuncis que es mouen) són especialment perjudicials.
- Autisme (TEA). Pot implicar sensibilitat a estímuls (sons, moviment, saturació visual) i preferència per un llenguatge literal i predictible; les metàfores o interfícies incoherents generen confusió.
- Problemes de memòria (inclòs el deteriorament associat a l'edat): dificulten recordar passos, codis o informació entre pantalles.
- Discalcúlia. Dificultat amb els números: dates, preus, codis, càlculs.
El fil comú: l'esforç cognitiu importa. Una interfície recarregada, amb llenguatge complex o passos impredictibles, exclou aquestes persones encara que tècnicament "funcioni".
Barreres típiques a la web:
- Text dens i argot: instruccions enrevessades, paràgrafs interminables.
- Distraccions: contingut que es mou, parpelleja o es reprodueix tot sol.
- Processos llargs i sense guia: formularis de molts passos sense indicar on ets.
- Missatges d'error críptics ("Error 0x24B") que no expliquen què fer.
- Manca de consistència: que el mateix botó canviï de lloc o de nom entre pàgines.
Escenari Cursalia. En Hugo té dislèxia i TDAH. Fa un qüestionari interactiu del curs. Les preguntes estan redactades amb dobles negacions i frases llarguíssimes, i a un costat parpelleja un bàner promocional. En Hugo rellegeix cada pregunta tres vegades i perd el focus constantment: falla no per no saber, sinó per com està presentat.
- Discapacitats de la parla
Afecten la capacitat de produir veu de manera clara (mudesa, disfèmia/quequeig, seqüeles d'un ictus, ús de laringe artificial). A la web solien tenir poc impacte… fins a l'arribada de les interfícies per veu: assistents, dictat, autenticació per veu, atenció al client que "només funciona per telèfon".
Barreres típiques a la web:
- Serveis que exigeixen parlar com a únic mètode (per exemple, verificació per veu) sense alternativa escrita.
- Suport només telefònic sense xat, correu o formulari.
- Suposar que tothom pot fer servir ordres de veu.
Escenari Cursalia. L'Aisha no pot parlar amb claredat després d'una operació. Té un dubte sobre la seva matrícula i l'única via de contacte que ofereix Cursalia és un telèfon. Si existís un xat o un fòrum/formulari de suport, l'Aisha resoldria el seu problema de manera autònoma.
- Discapacitats neurològiques i altres
Aquí incloem condicions que no encaixen netament a dalt però que són molt rellevants per a la web:
- Epilèpsia fotosensible. Certs flaixos, parpelleigs o patrons en pantalla poden desencadenar una crisi epilèptica. És de les poques barreres que no només exclouen, sinó que poden provocar un dany físic real.
- Trastorn vestibular / sensibilitat al moviment. Animacions àmplies, efectes de parallax o transicions brusques poden causar mareig o nàusees.
- Fatiga i dolor crònics, que redueixen el temps i l'energia disponibles per a tasques complexes.
Barreres típiques a la web:
- Contingut que fa flaixos més de tres vegades per segon (risc de crisi).
- Animacions grans impossibles d'aturar.
- Absència de respecte a la preferència del sistema de reduir el moviment.
Escenari Cursalia. La Nora té un trastorn vestibular. La landing de Cursalia s'obre amb un vídeo de fons a pantalla completa amb zoom continu i transicions lliscants. Al cap de pocs segons la Nora es mareja i tanca la pestanya: mai no arribarà a veure el catàleg.
- El model permanent / temporal / situacional aplicat
Recuperem el model de la lliçó 01-02: gairebé tota limitació permanent té equivalents temporals i situacionals que li passen a qualsevol. Dissenyar per a la primera resol també les altres dues, i per això l'accessibilitat beneficia el 100% dels usuaris. Aplicat grup a grup:
| Grup de discapacitat | Permanent | Temporal | Situacional |
|---|---|---|---|
| Visual | Ceguesa, baixa visió, daltonisme | Dilatació de pupil·la, conjuntivitis, ull embenat | Sol directe a la pantalla; mòbil amb brillantor baixa |
| Auditiva | Sordesa, hipoacúsia | Otitis, tap de cera | Estudiar al metro sense auriculars; oficina sorollosa |
| Motriu / física | Lesió medul·lar, pàrkinson, amputació | Braç enguixat, esquinç de canell | Sostenir un nadó; fer servir el mòbil amb una mà al bus |
| Cognitiva / aprenentatge | Dislèxia, TDAH, autisme | Commoció, efecte de medicació, migranya | Cansament, pressa, estrès, distracció |
| De la parla | Mudesa, seqüeles d'ictus | Laringitis, afonia | Estar en una biblioteca en silenci |
| Neurològica | Epilèpsia fotosensible, trastorn vestibular | Recuperació d'una cirurgia | Mareig per llegir en un cotxe en moviment |
La lectura clau: quan posem subtítols "per al Diego" (sord, permanent), també ajudem qui té otitis (temporal) i qui estudia sense auriculars al metro (situacional). L'accessibilitat no és un cas extrem: és el cas general.
Errors Comuns i Consells
- Pensar només en la ceguesa. És l'exemple més citat, però la ceguesa total és una minoria dins de les discapacitats. La baixa visió, les cognitives i les motrius afecten moltíssimes més persones i s'obliden sovint.
- Oblidar les discapacitats invisibles. Dislèxia, TDAH, autisme o problemes de memòria no es veuen, però condicionen enormement l'ús de la web.
- Ignorar el temporal i el situacional. Redueix l'accessibilitat a "una minoria" i debilita l'argumentari. Tots serem usuaris amb alguna limitació en algun moment.
- Fer servir llenguatge que estigmatitza. Prefereix el llenguatge centrat en la persona ("persona amb discapacitat", "persona cega") davant d'etiquetes reduccionistes.
- Consell: davant de cada superfície de Cursalia, pregunta't "i si l'usuari no pot veure / sentir / fer servir el ratolí / processar text complex?". Aquestes quatre preguntes cobreixen la majoria de les barreres.
Exercicis
Exercici 1. Classifica cada situació en el grup de discapacitat afectat (visual, auditiva, motriu, cognitiva, de la parla o neurològica) i indica la barrera concreta:
- Un usuari no pot distingir quins camps del formulari estan marcats com a obligatoris perquè només se senyalen en vermell.
- Un usuari pateix un mareig intens en entrar a la landing per un fons animat.
- Un usuari no aconsegueix prémer el petit botó "Confirmar" perquè li tremolen les mans.
Exercici 2. Per al reproductor de vídeo-lliçó de Cursalia, anomena una barrera que afecti: (a) una persona sorda, (b) una persona cega, (c) una persona amb TDAH.
Exercici 3. Pren la barrera "el catàleg transmet la disponibilitat d'un curs només amb color (verd = places lliures, vermell = complet)". Aplica el model permanent/temporal/situacional: dona un beneficiari d'arreglar-ho en cada categoria.
Solucions
Solució 1.
- Visual (daltonisme): la informació es dona només pel color; qui no distingeix el vermell no sap quins camps són obligatoris.
- Neurològica (sensibilitat al moviment / vestibular): l'animació de fons provoca mareig i no es pot aturar.
- Motriu (tremolor): l'objectiu de clic és massa petit per encertar-lo sense precisió.
Solució 2. (a) Sorda: el vídeo no té subtítols ni transcripció, així que perd tot el que es parla. (b) Cega: els controls del reproductor (play, volum) no estan etiquetats o no es poden fer servir sense veure-hi, i no hi ha descripció del que passa en pantalla. (c) TDAH: elements que distreuen al voltant del vídeo (bàners en moviment, reproducció automàtica del següent) dificulten mantenir l'atenció.
Solució 3. Arreglar el "només color" (afegint també una etiqueta de text com "Complet") beneficia: permanent = persona amb daltonisme; temporal = algú amb fatiga visual que percep malament els matisos de color aquella tarda; situacional = qui mira el catàleg al mòbil sota el sol, on els colors es renten.
Conclusió
Hem recorregut el mapa humà de l'accessibilitat: les discapacitats visuals, auditives, motrius, cognitives, de la parla i neurològiques, què implica cada grup i quines barreres troba a la web —sempre a alt nivell, perquè el "com s'arregla" arriba als mòduls 3 a 5—. Hem vist que gairebé cap no és un cas extrem: el model permanent / temporal / situacional demostra que dissenyar per a aquestes persones millora l'experiència de tothom, i ho hem il·lustrat amb la Marta, en Diego, la Lucía, en Hugo, l'Aisha i la Nora a Cursalia.
Però aquestes persones no accedeixen a la web a mà descoberta: es recolzen en eines que tradueixen el contingut a un canal que sí que poden fer servir —veu, braille, ampliació, ordres de veu—. Aquestes eines són les tecnologies d'assistència, i són el tema de la lliçó següent, 02-02: Visió General de Tecnologies d'Assistència. Conèixer-les és imprescindible, perquè el nostre codi haurà de "parlar" amb elles.
Curs d'Accessibilitat Web
Mòdul 1: Introducció a l'Accessibilitat Web
- Què és l'Accessibilitat Web?
- La Importància de l'Accessibilitat Web
- Visió General de les Lleis i Normes d'Accessibilitat
- Introducció a les WCAG
Mòdul 2: Comprensió de les Discapacitats i les Tecnologies d'Assistència
- Tipus de Discapacitats
- Visió General de les Tecnologies d'Assistència
- Com Utilitzen la Web les Persones amb Discapacitat
Mòdul 3: Principis del Disseny Accessible
- Perceptible: Fer el Contingut Disponible als Sentits
- Operable: Interfície d'Usuari i Navegació
- Comprensible: Informació i Operació
- Robust: Compatibilitat amb Tecnologies Actuals i Futures
Mòdul 4: Implementació de l'Accessibilitat en HTML i CSS
- HTML Semàntic
- Formularis Accessibles
- Ús de Rols i Propietats ARIA
- Contrast de Color i Redimensionament del Text
Mòdul 5: Accessibilitat en JavaScript i Multimèdia
- Creació de Widgets de JavaScript Accessibles
- Accessibilitat del Teclat
- Contingut de Vídeo i Àudio Accessible
- Proporcionar Alternatives de Text per a les Imatges
Mòdul 6: Proves i Avaluació de l'Accessibilitat
- Tècniques de Proves Manuals
- Eines de Proves Automatitzades
- Proves d'Usuari amb Tecnologies d'Assistència
- Interpretació d'Informes d'Accessibilitat
