Primera revisió: comprovacions ràpides que qualsevol persona pot fer

No cal ser auditor per adonar-se que un web té problemes d'accessibilitat. Amb un navegador, el teclat i un parell d'extensions gratuïtes pots fer en vint o trenta minuts una primera revisió que detecta moltes de les barreres que vam veure a la lliçó sobre les barreres més freqüents. El W3C publica una guia amb aquest mateix enfocament, Easy Checks – A First Review of Web Accessibility. Aquí et proposem una versió adaptada en sis blocs: què cal mirar, com fer-ho i quin criteri WCAG hi ha al darrere.

Abans de començar: pàgines, tasca i eines

Tria tres o quatre pàgines representatives: la d'inici, una de contingut (una notícia, una fitxa de producte), una amb formulari i, si n'hi ha, el procés principal del lloc (un tràmit, una compra, una reserva). Encara millor si recorres una tasca completa de principi a fi. Prepara:

• Un navegador actualitzat: Chrome, Edge o Firefox.
• Una extensió d'avaluació gratuïta, com WAVE (de WebAIM) o axe DevTools (de Deque).
• Un analitzador de contrast, com Colour Contrast Analyser (de TPGi), o el que incorporen les eines de desenvolupament del navegador.
• Una taula senzilla per anotar: pàgina, problema, on és, a qui afecta i una captura de pantalla.

1. Títol i idioma de la pàgina

Mira el text de la pestanya del navegador. Cada pàgina ha de tenir un títol que digui què és i on ets, per exemple «Sol·licitud de cita prèvia – Ajuntament de Villaserena», i no «Inici» a totes les pàgines ni «Untitled» (2.4.2 Pàgina titulada). És el primer que anuncia un lector de pantalla i el que permet distingir diverses pestanyes obertes. Pel que fa a l'idioma, l'extensió d'avaluació t'avisarà si falta l'atribut lang a l'element <html> (3.1.1 Idioma de la pàgina).

2. Imatges i textos alternatius

Activa l'extensió i revisa els avisos sobre imatges. Comprova tres coses: que les imatges informatives tenen text alternatiu, que aquest text descriu el que importa (no «imatge1.jpg» ni «foto») i que les icones que funcionen com a botó o enllaç tenen nom (1.1.1 Contingut no textual). L'eina et diu si l'atribut existeix; si el text té sentit només ho pots jutjar tu. Com escriure bons textos alternatius ho veuràs al nivell 2.

3. Encapçalaments i estructura

Amb l'extensió, mostra l'esquema d'encapçalaments de la pàgina. S'hauria de llegir com un índex: un encapçalament principal que resumeix la pàgina i seccions ordenades a sota. Hi ha tres senyals d'alarma: no hi ha cap encapçalament; hi ha textos que semblen títols però al codi són paràgrafs en negreta; o els nivells es trien per la mida visual i no per la jerarquia (1.3.1 Informació i relacions). Saltar d'encapçalament en encapçalament és una de les maneres més habituals d'explorar una pàgina amb lector de pantalla, així que una estructura mal feta obliga a escoltar tota la pàgina.

4. Contrast i zoom

Fes servir l'analitzador per mesurar el contrast dels textos que et semblin més clars: grisos sobre blanc, text sobre fotografies, botons de colors suaus. El text normal necessita una relació de contrast de com a mínim 4,5:1 amb el fons, i el text gran (a partir de 18 punts, o 14 en negreta), de com a mínim 3:1 (1.4.3 Contrast (mínim)).

Després amplia la pàgina al 200 % amb Ctrl + + (Cmd + + al Mac). El text ha de créixer sense tallar-se ni solapar-se i sense que es perdi contingut ni funcionalitat (1.4.4 Canvi de mida del text). Si continues fins al 400 % (en una finestra d'uns 1.280 píxels d'amplada), el contingut s'hauria de reorganitzar, normalment en una sola columna, sense obligar-te a desplaçar-te en horitzontal per llegir (1.4.10 Reajustament dels elements).

5. Teclat i focus

Deixa el ratolí de banda. Prem Tab per avançar, Maj + Tab per retrocedir, Retorn per activar enllaços i botons, Espai per a caselles i botons, les fletxes per a botons d'opció i llistes, i Esc per tancar finestres emergents. Comprova que:

• Arribes a tots els enllaços, botons i camps, i els pots activar (2.1.1 Teclat).
• Veus sempre on és el focus: un contorn, un subratllat o un canvi de color clar (2.4.7 Focus visible).
• L'ordre segueix la lògica de la pàgina (2.4.3 Ordre del focus).
• No et quedes mai atrapat en un element del qual no pots sortir (2.1.2 Sense paranys per al focus del teclat).
• En obrir un menú o una finestra modal, el focus hi entra i, en tancar-la, torna al punt de partida.
• El primer Tab mostra, idealment, un enllaç «Salta al contingut principal», l'anomenat skip link, que evita recórrer tot el menú a cada pàgina (2.4.1 Evitar blocs).

És la prova més reveladora de tota la revisió: moltes barreres bloquejants apareixen aquí i cap eina automàtica no les detecta.

/* Incorrecte: elimina l'indicador de focus sense substituir-lo */
a:focus, button:focus { outline: none; }

/* Correcte: un indicador visible, gruixut i amb contrast */
a:focus-visible, button:focus-visible {
  outline: 3px solid #1a1a1a;
  outline-offset: 2px;
}

6. Formularis i multimèdia

Als formularis, fes clic al text de cada etiqueta: si el cursor salta al camp, l'etiqueta sol estar ben associada (1.3.1 Informació i relacions; 3.3.2 Etiquetes o instruccions); si no salta, revisa aquest camp amb l'extensió. Després envia el formulari buit o amb una dada errònia. L'error s'ha d'explicar amb text, indicar quin camp falla i, si pot ser, com corregir-lo; no n'hi ha prou de pintar la vora de vermell (3.3.1 Identificació d'errors; 1.4.1 Ús del color).

En multimèdia, els vídeos amb parla han de tenir subtítols sincronitzats i correctes (1.2.2 Subtítols (enregistrat)). Cap so no s'ha de reproduir automàticament durant més de 3 segons sense un control per aturar-lo o per abaixar-ne el volum (1.4.2 Control de l'àudio). I els carrusels o animacions que es mouen sols durant més de 5 segons necessiten un botó per aturar-los (2.2.2 Posar en pausa, aturar, amagar).

Com anotar i comunicar el que trobes

Una revisió només serveix si els resultats s'entenen i es poden reproduir. Per a cada problema anota la pàgina, què passa, com reproduir-lo, a qui afecta i una captura. Descriu la barrera i el seu efecte abans que el criteri: «el botó Confirma no es pot activar amb teclat, així que no es pot acabar la reserva» convenç més que «falla el 2.1.1».

Fes servir «possible» davant del criteri: en una primera revisió assenyales indicis, i la confirmació correspon a una avaluació completa. Prioritza en el teu resum les barreres bloquejants de les tasques principals.

Resum

• Una primera revisió detecta problemes evidents en poc temps, però no demostra conformitat: per a això cal una auditoria amb metodologia.
• Sis blocs: títol i idioma, imatges, encapçalaments, contrast i zoom, teclat i focus, formularis i multimèdia.
• La prova amb teclat és la més reveladora i la que cap eina automàtica no substitueix.
• Anota cada problema amb pàgina, efecte, passos, persona afectada i captura, i prioritza els bloquejants.