Cas pràctic, exercicis i llista de comprovació

Aquesta lliçó aplica tot el curs a un cas realista: una pàgina auditada troballa a troballa, amb criteri, mesura, excepcions descartades i correcció, i també les possibles fallades que es descarten i per què. Després tens sis exercicis amb solució, una llista de comprovació per a les teves auditories i els recursos oficials de referència.

Cas pràctic: la pàgina de cita prèvia d'una seu electrònica

L'Ajuntament de Villaejemplo (fictici) encarrega l'avaluació de la seva seu electrònica respecte a les WCAG 2.2 AA, amb correspondència amb l'EN 301 549 v3.2.1 (PDF, s'obre en una finestra nova) per a la seva declaració d'acord amb l'RD 1112/2018 (PDF, s'obre en una finestra nova). Aquesta lliçó se centra en una pàgina de la mostra: sede.villaejemplo.example/cita-previa. Conté una capçalera fixa de 96 px, el bàner de galetes d'un proveïdor, targetes per triar el servei, un calendari, una taula de franges horàries, un formulari de dades personals, un mapa d'oficines i un vídeo tutorial. La sessió caduca als 10 minuts.

Configuració registrada: Windows 11, Chrome i Firefox en les versions del dia, NVDA, finestra de 1280 px, zoom al 100 %, 200 % i 400 %, i emulació de 320 px.

Pas 1: recorregut amb teclat

En tabular per les targetes de servei, el focus no s'hi atura: són div amb un gestor de clic. Troballa 1: 2.1.1 Teclat, amb el 4.1.2 com a secundari perquè tampoc no tenen rol ni nom de botó. Més avall, el botó «Sol·licita» queda completament sota la capçalera fixa quan rep el focus. Troballa 2: 2.4.11 Focus no ocult (mínim); no encaixa en la nota sobre contingut obert per l'usuari, perquè la capçalera fixa l'ha posada l'autor i no es pot retirar. Es marca com a criteri de les WCAG 2.2 no inclòs a l'EN 301 549 v3.2.1. Correcció: scroll-padding-top d'almenys 96 px.

Pas 2: mesures visuals

L'enllaç «Configura» del bàner de galetes és #9B9B9B sobre blanc a 13 px: 2,78:1. Troballa 3: 1.4.3, en el component d'un tercer, que s'inclou perquè forma part de la pàgina. Els camps del formulari fan servir com a única pista un placeholder #A0A0A0 (2,61:1): troballa 4: 1.4.3; l'absència d'etiqueta visible s'anota per avaluar-la amb el 3.3.2 als criteris del curs següent. El logotip de l'ajuntament, en gris clar sobre blanc, es descarta: els logotips estan exempts de l'1.4.3.

Al calendari, els dies disponibles només es distingeixen per un fons verd clar. Troballa 5: 1.4.1 Ús del color. Els dies fan 20 × 20 px amb 1 px de separació (centres a 21 px), cosa que no compleix la mida ni l'espaiat del 2.5.8; tanmateix, la pàgina ofereix un camp de text «Data (dd/mm/aaaa)» amb un botó de 44 px que fa el mateix: s'aplica l'excepció de control equivalent i no es registra cap fallada, encara que sí una recomanació.

Pas 3: zoom, reflow i espaiat

A 320 px CSS, el formulari de dades personals té una amplada fixa de 480 px i obliga a desplaçar-se en horitzontal per veure els camps. Troballa 6: 1.4.10 Reajustament dels elements. La taula de franges horàries també es desplaça en horitzontal dins del seu contenidor, però les taules de dades estan exemptes: no es registra. Amb l'espaiat de l'1.4.12 aplicat, tot el text continua visible.

Pas 4: temps, formulari i multimèdia

Als 9 minuts s'obre un diàleg que rep el focus, avisa que queden 60 segons i ofereix el botó «Amplia la sessió», que es pot fer servir sense límit: el 2.2.1 es compleix. Després d'ampliar-la, la confirmació «Sessió ampliada» apareix sense que el lector de pantalla l'anunciï, cosa que s'anota per avaluar el 4.1.3 al curs següent. Els camps de nom, cognoms, correu i telèfon no tenen autocomplete: troballa 7: 1.3.5.

El mapa d'oficines té botons de zoom i desplaçament, i a sota hi ha un llistat HTML d'oficines amb adreça i horari: l'1.1.1, el 2.5.1 i el 2.5.7 es compleixen. El vídeo tutorial té subtítols automàtics que transcriuen «cita prèvia» com a «visita prèvia» i la locutora diu «premeu aquí» mentre el cursor assenyala un botó el nom del qual no s'esmenta. Troballa 8: 1.2.2 (subtítols inexactes) i troballa 9: 1.2.3 i 1.2.5 (informació visual que no és a l'àudio, sense audiodescripció ni transcripció descriptiva; la transcripció hauria estat suficient per al nivell A, però l'AA exigeix audiodescripció).

Resultat de la pàgina

Nou troballes, cinc possibles fallades descartades amb la seva justificació (logotip, calendari amb equivalent, taula de dades, sessió amb avís i mapa amb alternativa) i dues notes per al curs següent. Les troballes 1 i 2 són de severitat màxima perquè impedeixen completar la cita amb teclat; la 3 es comunica al proveïdor de galetes a través del client.

Exercicis d'autoavaluació

Exercici 1. Un text d'ajuda de 14 px amb gruix normal és #757575 sobre blanc i l'analitzador dona 4,61:1. Compleix l'1.4.3?

Exercici 2. Al peu, quatre icones de xarxes socials de 22 × 22 px estan separades 4 px entre si. No hi ha cap altre enllaç equivalent. Compleixen el 2.5.8?

Exercici 3. El botó mostra el text «Envia la sol·licitud», però el seu aria-label és «Botó d'enviament». Quin criteri incompleix?

Exercici 4. La capçalera de la portada té un vídeo de fons sense so que es repeteix en bucle i no té control de pausa. Quin criteri incompleix i què implica?

Exercici 5. L'indicador de focus dels enllaços és un contorn de 2 px #CCCCCC sobre fons blanc (1,61:1). És una fallada del 2.4.7 o de l'1.4.11?

Exercici 6. Un xat flotant que no es pot tancar tapa completament el botó «Següent» quan rep el focus. El client necessita la declaració d'acord amb l'RD 1112/2018. Com ho registres?

Llista de comprovació

• Justifico cada fallada amb el text del criteri, no amb una tècnica.
• Comprovo les definicions i descarto per escrit cada excepció.
• Classifico cada imatge segons la seva funció abans de jutjar-ne l'alt.
• Reviso cada vídeo sense so i sense imatge.
• Mesuro el contrast del color renderitzat, en tots els estats, sense arrodonir.
• Provo l'1.4.4 al 200 %, l'1.4.10 a 320 px CSS i l'1.4.12 amb l'espaiat aplicat.
• Recorro cada pàgina només amb teclat, buscant paranys i focus ocult.
• Localitzo límits de temps i contingut en moviment, i els cronometro.
• Busco alternatives de punter simple per a gestos i arrossegaments.
• Mesuro els objectius petits i aplico el cercle de 24 px.
• Incloc els components de tercers i vigilo els de no interferència.
• Assigno criteri principal i secundaris, nivell i versió.
• Registro els defectes de plantilla una sola vegada com a globals.
• Anoto la configuració i l'eina de cada mesura.

Per continuar aprenent

• WCAG 2.2, Recomanació del W3C: text normatiu, excepcions i glossari.
• Comprendre les WCAG 2.2: intenció, exemples i casos límit de cada criteri.
• Tècniques per a les WCAG 2.2: tècniques suficients i fallades documentades.
• Referència ràpida de les WCAG 2.2: criteris, tècniques i fallades filtrables per nivell.
• EN 301 549 v3.2.1 (ETSI): capítol 9, requisits per al web.