Cas pràctic, exercicis i llista de comprovació

Aquesta lliçó aplica tot el curs a un tràmit complet de seu electrònica. Primer veuràs un cas resolt pas a pas; després, cinc exercicis amb la seva solució, una llista de comprovació per a les teves properes auditories i recursos oficials per continuar aprofundint.

Cas pràctic: sol·licitud de plaça en una escola bressol municipal

L'Ajuntament de Villanueva del Campo (fictici) encarrega l'avaluació WCAG 2.2 AA del tràmit «Sol·licitud de plaça en escola bressol» de la seva seu electrònica, disponible en castellà i en valencià. El procés té sis passos: accés (Cl@ve o usuari i contrasenya municipals), dades de la persona sol·licitant, dades del menor, documentació, revisió i presentació, i justificant. La seu inclou un telèfon d'ajuda a la capçalera i un xat amb personal municipal.

Pas 1: delimitar els conjunts i el procés

Les versions en castellà i en valencià són conjunts de pàgines diferents (lliçó 2): la coherència es compara dins de cada versió, no entre elles. El tràmit és un procés i hi entra complet, incloses les pàgines de la passarel·la d'identificació, que es documenten com a contingut de tercers.

Pas 2: idioma i comportament predictible

• La versió en valencià declara <html lang="es">. El 3.1.1 no es compleix en aquesta versió: ha de declarar lang="ca" (o la variant ca-valencia).
• El selector d'idioma mostra «Valencià» sense lang. El 3.1.2 no es compleix a la versió en castellà.
• El telèfon d'ajuda és a la capçalera a totes les pàgines, tret del pas de documentació, on passa al peu. El 3.2.6 no es compleix.
• El desplegable «Tipus de jornada» mostra o amaga l'horari ampliat sense moure el focus: canvi de contingut, el 3.2.2 es compleix.

Pas 3: autenticació

L'accés amb usuari i contrasenya municipals bloqueja l'enganxament i el gestor de contrasenyes no emplena el camp. En el mateix pas s'ofereix Cl@ve; a la prova, el seu codi d'un sol ús admetia l'enganxament. Hi ha una alternativa sense bloqueig, així que el 3.3.8 es compleix, amb la recomanació de retirar el bloqueig de l'accés municipal (lliçó 5).

Pas 4: formulari

• A «Dades del menor» es torna a demanar el domicili introduït dues pantalles abans, sense opció de reutilitzar-lo. El 3.3.7 no es compleix.
• El format de «Data de naixement» (dd/mm/aaaa) només apareix després de l'error. El 3.3.2 no es compleix.
• Els errors en línia apareixen en sortir del camp i el focus continua avançant; NVDA no anuncia res. El 4.1.3 no es compleix. Els missatges indiquen com corregir: el 3.3.1 i el 3.3.3 es compleixen.
• El selector «Escola preferida» és un quadre combinat personalitzat: el camp no té rol combobox ni aria-expanded i les opcions són div sense rol. El 4.1.2 no es compleix (lliçó 7).

Pas 5: documentació, revisió i presentació

Després de pujar un fitxer apareix «Document afegit» sense anunci: s'afegeix a la troballa del 4.1.3. La pantalla de revisió mostra totes les dades amb enllaços «Modifica» abans de presentar: el 3.3.4 es compleix. El justificant s'ofereix en PDF, que s'avalua amb la seva pròpia metodologia (nivell 6).

Pas 6: consolidar

Criteri	Nivell	Resultat	Troballa
3.1.1 Idioma de la pàgina	A	No compleix	lang="es" a la versió en valencià
3.1.2 Idioma de les parts	AA	No compleix	Selector d'idioma sense lang
3.2.6 Ajuda coherent	A	No compleix	Telèfon al peu en un pas
3.3.2 Etiquetes o instruccions	A	No compleix	Format de data només després de l'error
3.3.7 Entrada redundant	A	No compleix	Domicili demanat dues vegades
3.3.8 Autenticació accessible	AA	Compleix	Cl@ve com a alternativa; recomanació
4.1.2 Nom, funció i valor	A	No compleix	Quadre combinat sense rol ni estats
4.1.3 Missatges d'estat	AA	No compleix	Errors en línia i pujada de fitxers

Com que el procés conté pàgines no conformes, el procés complet no és conforme amb el nivell AA.

Exercicis d'autoavaluació

1. El xat automatitzat apareix com a botó flotant al final del contingut a totes les pàgines d'una botiga, però a la pàgina de pagament és dins del menú de la capçalera. Quin criteri avalues i amb quin resultat?

Mostra la solució

3.2.6 Ajuda coherent: un mecanisme de contacte totalment automatitzat canvia el seu ordre relatiu en una pàgina del conjunt. No es compleix, tret que el canvi l'hagi provocat l'usuari.

2. El segon factor d'un banc demana el codi en sis caselles d'un dígit; en enganxar el codi complet només s'emplena la primera. No hi ha cap altre mètode. Veredicte?

Mostra la solució

El 3.3.8 no es compleix: obliga a transcriure el codi sense mecanisme d'ajuda ni alternativa. La solució és un únic camp amb autocomplete="one-time-code" o repartir el valor enganxat entre les caselles.

3. En marcar un filtre, el llistat s'actualitza, el focus continua a la casella i apareix «18 resultats» sense anunci. 3.2.2 o 4.1.3?

Mostra la solució

4.1.3. No hi ha canvi de context, perquè el focus no es mou i la pàgina conserva el seu propòsit, així que el 3.2.2 es compleix; el recompte és un missatge d'estat que s'ha de poder determinar programàticament, per exemple amb role="status".

4. En una auditoria AA, un company registra com a incompliment el 3.3.9 perquè l'inici de sessió fa servir un CAPTCHA de selecció d'imatges d'objectes comuns. Què corregeixes?

Mostra la solució

El 3.3.9 és AAA i queda fora de l'abast: passa a recomanacions. A nivell AA, el 3.3.8 es compleix per l'excepció de reconeixement d'objectes. Revisa a part l'1.1.1 (alternativa textual i una altra modalitat sensorial).

5. Un botó «M'agrada» canvia d'icona buida a plena en prémer-lo; a l'arbre d'accessibilitat és un botó anomenat «M'agrada» sense més informació. Què hi falta i quin criteri incompleix?

Mostra la solució

Hi falta l'estat: el 4.1.2 exigeix que l'estat es pugui determinar i que se'n notifiqui el canvi. Es resol amb aria-pressed="true" o "false" al botó, actualitzat a cada pulsació.

Llista de comprovació

• Defineix els conjunts de pàgines (versions lingüístiques, seu, àrea privada) abans de comparar.
• Verifica lang a cada versió i als selectors d'idioma i els passatges en un altre idioma.
• Canvia valors de controls amb teclat i comprova que no hi ha canvis de context sense avís.
• Compara la navegació, la identificació de components i la ubicació de l'ajuda entre pàgines.
• Envia cada formulari buit, amb errors i complet.
• Comprova les instruccions visibles, els errors en text i els suggeriments de correcció.
• Anota les dades demanades dues vegades a cada procés.
• Prova cada accés amb gestor de contrasenyes, enganxament i segon factor, inclosa la recuperació.
• Classifica cada CAPTCHA i busca una alternativa sense prova cognitiva.
• Revisa el nom, el rol, els estats i els valors de cada component personalitzat a l'arbre d'accessibilitat.
• Verifica cada missatge d'estat amb el Visor de veu de NVDA o un altre lector de la línia base.
• Assigna cada troballa al criteri específic i comprova'n el nivell.
• Separa els criteris AAA com a recomanacions i no citis el 4.1.1.

Per continuar aprenent

• Web Content Accessibility Guidelines (WCAG) 2.2, recomanació del W3C, amb el seu glossari normatiu.
• What's New in WCAG 2.2, resum oficial dels criteris nous.
• Understanding 3.3.8 Accessible Authentication (Minimum), amb exemples de mètodes conformes.
• ARIA Authoring Practices Guide: patrons, referència de rols i estats per component.
• Reial decret 1112/2018, sobre accessibilitat dels llocs web i aplicacions per a dispositius mòbils del sector públic.