Cas pràctic, exercicis i llista de comprovació

Aquesta lliçó aplega tot el que has après al curs. Primer resolem pas a pas un cas realista; després tens exercicis d'autoavaluació amb la solució i, al final, una llista de comprovació que pots fer servir a la feina.

Cas pràctic: la cita prèvia de l'Ajuntament de Villaserena

Villaserena és un municipi fictici de 30.000 habitants. La Lucía treballa a l'àrea de comunicació de l'ajuntament i rep, a través del mecanisme de comunicació de la declaració d'accessibilitat, la queixa d'un veí cec: no aconsegueix demanar cita prèvia per al padró amb el seu lector de pantalla. La mateixa setmana, un proveïdor ofereix a la regidoria un overlay que «garanteix el compliment legal amb una línia de codi». L'alcaldia demana a la Lucía una nota breu per decidir què cal fer.

Pas 1. Plantejar el problema des del model social

La Lucía no escriu «un usuari cec té dificultats», sinó «el servei de cita prèvia té barreres que impedeixen fer-lo servir amb lector de pantalla». El problema és del servei, no del veí, i per tant la solució també és responsabilitat de l'ajuntament.

Pas 2. Fer una primera revisió de la tasca completa

Recorre la tasca «demanar cita per al padró» amb l'extensió WAVE, l'analitzador de contrast i només el teclat, i anota aquestes troballes:

Pas de la tasca	Troballa	Possible criteri	Impacte
Totes les pàgines	El títol de la pestanya és sempre «Inici»	2.4.2 Pàgina titulada	Molesta
Triar oficina	Desplegable fet amb <div> que no s'obre amb teclat	2.1.1 Teclat; 4.1.2 Nom, funció, valor	Bloquejant
Triar dia	Calendari que només respon al ratolí	2.1.1 Teclat	Bloquejant
Verificació	CAPTCHA d'imatge sense alternativa	1.1.1 Contingut no textual	Bloquejant
Confirmar	Botó amb una icona i sense nom accessible	4.1.2 Nom, funció, valor	Greu
Textos d'ajuda	Gris clar sobre blanc, contrast aproximat de 2,5:1	1.4.3 Contrast (mínim)	Molesta

Pas 3. Prioritzar per impacte, no per quantitat

Hi ha sis troballes, però tres són bloquejants i expliquen per si soles la queixa: encara que es corregissin totes les altres, el veí continuaria sense poder demanar cita. La Lucía proposa corregir primer el desplegable, el calendari i el CAPTCHA, preferiblement substituint-los per elements natius d'HTML i per una verificació que no exigeixi reconèixer imatges.

Pas 4. Valorar l'oferta de l'overlay

La Lucía explica que l'overlay no pot convertir un desplegable de <div> en un control accessible ni fer usable un calendari que només respon al ratolí: són errors del codi original. Les funcions que ofereix (fer més gran la lletra, canviar el contrast) ja són al navegador i al sistema del veí. A més, la conformitat amb el RD 1112/2018 (PDF, s'obre en una finestra nova) s'avalua sobre el contingut real, no sobre un script afegit. Recomana no contractar-lo com a solució de compliment.

Pas 5. Argumentar davant l'alcaldia

Prepara quatre arguments breus, un per a cada interlocutor possible: dret i obligació (l'ajuntament està subjecte al RD 1112/2018 i ha de respondre a la queixa); persones afectades (amb la proporció de l'INE, unes 2.700 persones del municipi tenen una discapacitat reconeguda, a les quals s'afegeixen moltes persones grans); qualitat (els components natius són més senzills de mantenir) i servei (cada cita que no es pot demanar en línia acaba en una trucada o una visita a l'oficina).

Pas 6. Proposar els passos següents

• Respondre al veí, agrair-li la comunicació i oferir-li mentrestant una alternativa (cita per telèfon o presencial).
• Demanar al proveïdor la correcció dels tres bloquejants amb un termini i una verificació posterior.
• Encarregar una avaluació completa amb metodologia WCAG-EM (s'obre en una finestra nova) i revisar la declaració d'accessibilitat.
• Assignar responsables: comunicació per als continguts, el proveïdor per al codi i contractació per incloure requisits d'accessibilitat en la propera renovació.

Exercicis d'autoavaluació

1. Classifica com a discapacitat permanent, temporal o situacional: (a) una persona amb sordesa de naixement; (b) un repartidor que consulta el mòbil amb guants; (c) una veïna acabada d'operar de cataractes; (d) un viatger en un vagó sorollós sense auriculars.

Mostra la solució

(a) Permanent. (b) Situacional. (c) Temporal. (d) Situacional. Un web que funciona amb subtítols, bon contrast i objectius tàctils de mida adequada ajuda en els quatre casos.

2. Un company afirma: «El nostre web és accessible perquè l'eina automàtica ens dona 100 punts». Què li respons?

Mostra la solució

Que l'eina només detecta una part dels problemes i no pot valorar, per exemple, si el text alternatiu té sentit, si l'ordre del focus és lògic o si un calendari funciona amb teclat. La puntuació és un bon indici, però cal revisar les tasques principals amb teclat, zoom i lector de pantalla.

3. Indica quina baula de la cadena falla en cada cas: (a) el CMS no té camp per al text alternatiu; (b) un botó amb forma de paperera s'anuncia només com a «botó»; (c) una persona que acaba de començar amb el seu lector de pantalla no coneix les dreceres per saltar per encapçalaments.

Mostra la solució

(a) L'eina d'autor. (b) El contingut: el codi no dona un nom accessible al botó. (c) Els coneixements i les estratègies de la persona usuària; per això una estructura clara i previsible és encara més important.

4. Tens dos minuts amb la directora financera i dos més amb el responsable de màrqueting. Quin argument principal faries servir amb cadascun?

Mostra la solució

Amb la directora financera, el risc i el cost: corregir al final és més car que construir bé des del principi, i l'incompliment pot comportar reclamacions i sancions. Amb màrqueting, la conversió i la reputació: formularis clars i vídeos subtitulats redueixen l'abandonament de tots els clients.

5. Una administració decideix crear un «web només de text per a persones amb discapacitat» mantingut a part. Quin principi contradiu i què proposaries?

Mostra la solució

Contradiu el disseny universal, que busca que una única versió serveixi a totes les persones sense adaptacions. A més, aquestes versions tendeixen a quedar desactualitzades. El més adequat és corregir el web principal i integrar l'accessibilitat a les seves plantilles i processos.

6. En el cas de Villaserena, qui hauria de ser responsable principal que els avisos i les notícies nous portin textos alternatius correctes?

Mostra la solució

L'àrea de comunicació, que redacta i publica aquests continguts i sap quina informació aporta cada imatge. El proveïdor és responsable secundari: el CMS ha de permetre escriure el text alternatiu i mostrar-lo correctament al codi.

Llista de comprovació

• Descric els problemes com a barreres del servei, no com a limitacions de les persones.
• Faig servir «persona amb discapacitat» a la documentació oficial.
• Penso també en situacions temporals i situacionals.
• Avaluo tasques completes, no només pàgines soltes.
• Reviso el títol, l'idioma, les imatges i els encapçalaments de cada pàgina clau.
• Mesuro el contrast dels textos dubtosos.
• Provo el zoom al 200 % i al 400 %.
• Recorro les tasques principals només amb teclat i amb el focus sempre visible.
• Comprovo les etiquetes i els missatges d'error als formularis.
• Verifico els subtítols i els controls de pausa als vídeos i carrusels.
• Prioritzo les barreres bloquejants per sobre del nombre d'errors.
• No accepto un overlay ni una puntuació automàtica com a prova de conformitat.
• Adapto els arguments a qui m'escolta: dret, risc, negoci o qualitat.
• Assigno un responsable a cada peça: text, component, document i contracte.

Per continuar aprenent

• Introduction to Web Accessibility (W3C WAI): la introducció oficial a l'accessibilitat web.
• Easy Checks – A First Review of Web Accessibility (W3C WAI): la guia de primera revisió en què es basa la lliçó corresponent.
• Web Content Accessibility Guidelines (WCAG) 2.2 (W3C): el text oficial de les pautes.
• Reial decret 1112/2018 (BOE): accessibilitat dels llocs web i les aplicacions mòbils del sector públic.
• Convenció sobre els drets de les persones amb discapacitat (BOE): instrument de ratificació d'Espanya.