L'accessibilitat web és la pràctica de dissenyar i construir llocs i aplicacions perquè qualsevol persona pugui percebre'ls, entendre'ls, navegar-los i operar-los, amb independència de les seves capacitats, del dispositiu que faci servir o del context en què es trobi. En aquesta primera lliçó definim el concepte amb precisió, aclarim a qui beneficia (que és a molta més gent de la que t'imagines) i el distingim d'altres termes amb què sovint es confon: usabilitat, disseny inclusiu i disseny universal. També presentem Cursalia, la plataforma d'e-learning fictícia que auditarem i farem accessible al llarg de tot el curs. Entendre bé aquesta base és imprescindible: tot el que veurem després (lleis, WCAG, tècniques d'HTML/ARIA, proves) es recolza a tenir clar què estem intentant aconseguir i per a qui.

1. Definició precisa d'accessibilitat web
2. A qui beneficia: discapacitat i benefici universal (efecte vorada)
3. Accessibilitat vs. usabilitat vs. disseny inclusiu vs. disseny universal
4. Els quatre principis POUR (només de passada)
5. Presentació del projecte-fil: Cursalia

La definició de referència prové de la Web Accessibility Initiative (WAI) del W3C, el consorci que estandarditza la web:

L'accessibilitat web significa que els llocs web, les eines i les tecnologies estan dissenyats i desenvolupats de manera que les persones amb discapacitat els puguin fer servir. Més concretament, que puguin percebre, comprendre, navegar i interactuar amb la web, i contribuir-hi.

Convé desgranar tres idees d'aquesta definició:

• No és una característica opcional, és una propietat del producte. Un lloc és accessible o no ho és (en diferents graus), igual que és ràpid o lent. No s'"afegeix al final": es construeix.
• Cobreix percebre + comprendre + navegar + interactuar + contribuir. No n'hi ha prou que el contingut es vegi; l'usuari ha de poder llegir-lo amb un lector de pantalla, entendre'l, moure's per ell amb el teclat i emplenar un formulari per participar-hi.
• Parla de persones amb discapacitat, però no només. Com veurem, el benefici s'estén a tots els usuaris.

Una manera útil d'interioritzar-ho: l'accessibilitat consisteix a eliminar barreres. La discapacitat, en el model social que assumeix la web moderna, no és només "dins de la persona"; sorgeix de la interacció entre una limitació funcional i un entorn mal dissenyat. Una escala sense rampa no discapacita ningú per si sola: discapacita qui fa servir cadira de rodes perquè no es va pensar cap alternativa. A la web, un botó que només funciona amb clic de ratolí és aquesta escala sense rampa per a qui navega amb teclat.

El primer grup beneficiari són les persones amb discapacitats, que poden ser visuals (ceguesa, baixa visió, daltonisme), auditives, motrius (dificultat o impossibilitat de fer servir el ratolí) o cognitives i del llenguatge. Al mòdul 2 estudiarem en detall aquests tipus i les tecnologies d'assistència que empren; aquí n'hi ha prou de retenir que parlem d'una part molt significativa de la població (l'OMS l'estima al voltant d'un 15-16% de persones amb alguna discapacitat).

El curb-cut effect o "efecte vorada" és la millor metàfora per entendre per què l'accessibilitat importa a tothom. Els rebaixos de vorada (aquelles rampetes a les cantonades de les voreres) es van instal·lar pensant en les cadires de rodes. Però avui les fan servir —i les agraeixen— moltíssimes més persones: qui empeny un cotxet de nadó, un repartidor amb una carretó, algú amb una maleta, un ciclista, una criatura amb patinet. El que es va dissenyar per a un grup concret va acabar millorant l'experiència de la majoria.

A la web passa exactament el mateix:

La conclusió és potent: l'accessibilitat no és un cost per a una minoria, és una inversió en qualitat per a tothom. Aprofundirem en el "cas de negoci" i en les situacions temporals/situacionals a la lliçó 01-02.

Aquests quatre termes estan relacionats i sovint es fan servir com a sinònims, però signifiquen coses diferents. Distingir-los evita malentesos freqüents als equips.

Idees clau per no confondre'ls:

• Accessibilitat i usabilitat se solapen però no són el mateix. Un lloc pot ser tècnicament accessible (un lector de pantalla ho llegeix tot) i tot i així tenir una mala usabilitat (el formulari té 40 camps confusos). I a l'inrevés: una cosa molt usable amb ratolí pot ser inaccessible amb teclat. L'ideal és la "usabilitat accessible": que sigui usable també per a qui té una discapacitat.
• El disseny inclusiu és el "com" (el procés); l'accessibilitat és en bona mesura el "què" (el resultat i el seu compliment).
• El disseny universal és l'"ideal": una única solució que no segregui. Evitar la típica "versió accessible" separada i pitjor mantinguda.

WCAG organitza tota l'accessibilitat al voltant de quatre principis, coneguts per l'acrònim POUR. Aquí només els anomenem perquè et sonin; els desenvoluparem en profunditat al mòdul 3:

• Perceptible (Perceivable): la informació ha de poder percebre's per algun sentit (p. ex., text alternatiu per a imatges).
• Operable (Operable): la interfície ha de poder manejar-se (p. ex., amb teclat, no només amb ratolí).
• Comprensible (Understandable): el contingut i el funcionament s'han d'entendre.
• Robust (Robust): el codi ha de funcionar de manera fiable amb diferents navegadors i tecnologies d'assistència.

De moment queda't amb l'acrònim. L'estructura de WCAG la veurem a la lliçó 01-04 i cada principi, amb criteris i tècniques, al mòdul 3.

Al llarg del curs treballarem sobre un cas pràctic continu: Cursalia, una plataforma d'e-learning (campus en línia) fictícia. És un exemple ideal perquè concentra gairebé tots els reptes d'accessibilitat reals: contingut multimèdia, formularis, interaccions dinàmiques i molt text.

Anirem auditant i fent accessibles aquestes superfícies clau, que reapareixeran als exemples i exercicis de cada mòdul:

• Landing i catàleg de cursos: targetes amb imatges (text alternatiu, estructura).
• Fitxa de curs: títols, descripcions i jerarquia d'encapçalaments.
• Reproductor de vídeo-lliçó: subtítols i transcripció.
• Formulari de matrícula/registre: etiquetes, errors i validació accessible.
• Qüestionaris interactius: focus, teclat i retroalimentació.
• Filtre desplegable del catàleg: un widget personalitzat accessible.
• Barra de progrés de l'alumne: estat comunicat a les tecnologies d'assistència.
• Paleta de marca Cursalia: contrast de color suficient.
• Fòrums/comentaris: contingut generat pels usuaris.
• Panell de l'alumne com a SPA: navegació i anuncis de canvis dinàmics.

En aquest mòdul introductori farem servir aquestes superfícies només per il·lustrar conceptes. Vegem un primer exemple minúscul, una targeta del catàleg, per fixar la idea de "barrera":

No et preocupis per dominar l'alt ara (ho veurem a fons al mòdul 5): l'objectiu és que reconeguis la diferència entre una interfície amb barrera i una sense barrera. Aquest "ull" és el primer que desenvolupa un professional de l'accessibilitat.

• "L'accessibilitat és només per a persones cegues." Fals. Cobreix discapacitats visuals, auditives, motrius i cognitives, i beneficia tothom per l'efecte vorada.
• "Ja ho arreglarem al final del projecte." L'error més car. Refer una interfície per fer-la accessible costa molt més que dissenyar-la bé des del principi (disseny inclusiu).
• Confondre accessibilitat amb usabilitat. Passar una eina automàtica no garanteix que el lloc sigui usable per una persona amb discapacitat. Són coses complementàries.
• Crear una "versió accessible" a part. Sol quedar desactualitzada i de pitjor qualitat; segrega en lloc d'incloure. Persegueix el disseny universal: una sola solució per a tothom.
• Consell: comença a mirar qualsevol web preguntant-te "podria fer servir això sense veure la pantalla? sense ratolí? sense sentir-hi?". Aquest hàbit és més valuós que memoritzar regles.

Exercici 1. Explica amb les teves paraules l'"efecte vorada" (curb-cut effect) i posa un exemple diferent dels de la lliçó aplicat a Cursalia.

Exercici 2. Classifica cada frase segons si es refereix a accessibilitat, usabilitat, disseny inclusiu o disseny universal:

1. "Vam redissenyar el menú perquè es trobés a la primera."
2. "El reproductor es maneja igual de bé amb teclat que amb ratolí, sense una versió a part."
3. "Vam convidar un usuari cec i un de gran a les proves des de l'sprint 1."
4. "Vam afegir text alternatiu a totes les imatges del catàleg per als lectors de pantalla."

Exercici 3. Observa aquesta targeta del catàleg de Cursalia i identifica com a mínim una barrera potencial (sense resoldre-la encara):

Solució 1. L'efecte vorada descriu com una millora dissenyada per a un grup amb discapacitat acaba beneficiant molta més gent. Exemple a Cursalia: les transcripcions de les vídeo-lliçons es creen pensant en persones sordes, però també permeten a qualsevol alumne cercar per text un concepte dins del vídeo o repassar sense auriculars a la biblioteca.

Solució 2.

1. Usabilitat. 2. Disseny universal. 3. Disseny inclusiu. 4. Accessibilitat.

Solució 3. Barreres potencials: (a) el clic és a un <div> amb onclick, no a un <a>/<button>, així que no és assolible ni activable amb teclat (barrera motriu); (b) la <img> no té alt, invisible per als lectors de pantalla (barrera visual); (c) no hi ha cap indicació que l'element sigui interactiu per a les tecnologies d'assistència. Les solucions concretes arribaran als mòduls 4 i 5; aquí n'hi havia prou amb detectar les barreres.

En aquesta lliçó hem definit l'accessibilitat web com l'eliminació de barreres perquè qualsevol persona pugui percebre, comprendre, navegar i interactuar amb la web. Hem vist que beneficia tant les persones amb discapacitat com, per l'efecte vorada, tota la ciutadania, i hem distingit accessibilitat, usabilitat, disseny inclusiu i disseny universal. Hem anomenat els principis POUR (que es desenvolupen al mòdul 3) i hem presentat Cursalia, el projecte que ens acompanyarà tot el curs.

Ara que sabem què és l'accessibilitat, la següent pregunta natural és per què hi hauríem d'invertir. A la propera lliçó, "Importància de l'Accessibilitat Web", veurem la dimensió ètica, el cas de negoci (mercat, SEO, marca), el risc legal i el cost real de la inaccessibilitat.