Cas pràctic, exercicis i llista de comprovació

És hora d'ajuntar tot el que has après. Primer resoldràs amb nosaltres un cas realista pas a pas; després posaràs a prova el teu criteri amb sis exercicis i acabaràs amb una llista de comprovació que podràs fer servir en qualsevol formulari que desenvolupis o revisis.

Cas pràctic: la sol·licitud d'ajuda per a material escolar

Un ajuntament fictici publica a la seva seu electrònica la «Sol·licitud d'ajuda per a material escolar». És un procés de tres passos: dades del sol·licitant, documentació i revisió i enviament. Les queixes rebudes a través del mecanisme de comunicació que exigeix el RD 1112/2018 (PDF, s'obre en una finestra nova) parlen de «no puc acabar la sol·licitud» i «em fa fora a mig tràmit». L'equip de desenvolupament et demana que el revisis i proposis correccions. Aquest és el procés que segueixes.

Pas 1. Recórrer el procés amb teclat i lector de pantalla

Abans d'obrir el codi, completes el tràmit només amb teclat i després amb NVDA, anotant cada barrera. Hi trobes: camps de nom, cognoms i DNI etiquetats només amb placeholder; la pregunta «Actues en representació d'una altra persona?» amb dos botons d'opció sense fieldset; un desplegable de «Centre educatiu» fet amb <div> que no s'obre amb teclat; una zona per arrossegar l'empadronament sense botó; un CAPTCHA de text distorsionat abans d'enviar, i una sessió que caduca als 10 minuts sense avís.

Pas 2. Etiquetes, grups i noms

Substitueixes els placeholder per <label for> visibles, agrupes la pregunta de representació amb <fieldset> i <legend> i associes l'ajuda del DNI («8 xifres i una lletra») amb aria-describedby. Al tauler Accessibility descobreixes, a més, que el botó visible «Envia la sol·licitud» té aria-label="Submit": l'elimines per complir el 2.5.3 Etiqueta en el nom.

Pas 3. Errors i conservació de dades

En enviar amb errors, la pàgina es recarregava, marcava els camps només en vermell i buidava el fitxer adjunt. Ara el servidor retorna el formulari amb els valors conservats (3.3.7), un resum d'errors enllaçat que rep el focus, missatges en text al costat de cada camp vinculats amb aria-describedby, aria-invalid="true" als camps afectats i el nombre d'errors al <title>.

<title>2 errors – Pas 1 de 3: Dades del sol·licitant – Ajuda escolar</title>

Pas 4. autocomplete i entrada redundant

Afegeixes autocomplete al nom (given-name), als cognoms (family-name), al correu (email), al telèfon (tel) i a l'adreça (street-address, postal-code, address-level2). El DNI no té valor a la llista, així que només porta l'inputmode adequat i la seva ajuda. Al pas 3 es tornava a demanar el correu «per enviar el justificant»: el substitueixes pel correu ja introduït, mostrat i editable.

Pas 5. Controls especials i visuals

El desplegable de centres passa a ser un <select> natiu agrupat per localitat amb <optgroup>. La zona d'arrossegament conserva l'arrossegament, però ara conté un <input type="file"> amb la seva etiqueta, l'ajuda «PDF, JPG o PNG. Màxim 10 MB» i una llista d'adjunts amb botons «Elimina» que anomenen el fitxer. Les vores dels camps passen de #DDDDDD a #767676 i es recupera l'outline de focus que eliminava el full d'estils.

Pas 6. CAPTCHA, temps i verificació

El CAPTCHA no forma part de l'autenticació (la persona ja va entrar amb Cl@ve), així que el 3.3.8 no s'hi aplica, però continua sent una barrera sota l'1.1.1. Com que l'accés ja està autenticat, l'equip el retira i reforça la protecció al servidor amb límits de freqüència. Per a la sessió, s'afegeix un avís amb role="alertdialog" dos minuts abans de caducar, amb un botó per ampliar-la, i el desament automàtic d'esborranys. Finalment, repeteixes el recorregut complet amb teclat, NVDA, zoom al 400 % i colors forçats, i documentes cada correcció amb captures d'abans i després.

Exercicis d'autoavaluació

1. Un camp té <label for="tel">Telèfon</label> i, a més, aria-label="Mòbil de contacte". Quin nom anuncia el lector i quin criteri s'incompleix?

2. Escriu el marcatge de «Data de naixement» amb tres camps (dia, mes i any).

<fieldset>
  <legend>Data de naixement</legend>
  <label for="nac-d">Dia</label>
  <input id="nac-d" inputmode="numeric" autocomplete="bday-day">
  <label for="nac-m">Mes</label>
  <input id="nac-m" inputmode="numeric" autocomplete="bday-month">
  <label for="nac-a">Any</label>
  <input id="nac-a" inputmode="numeric" autocomplete="bday-year">
</fieldset>

3. Reescriu aquest missatge d'error d'un adjunt: «Fitxer no vàlid».

4. La sessió d'una seu caduca als 15 minuts d'inactivitat i es perden les dades. Proposa una solució que compleixi el 2.2.1 Temps ajustable.

5. Un desplegable «Província» porta onchange="this.form.submit()". Quin problema hi ha i com el corregeixes?

6. Les caselles personalitzades d'un formulari mostren l'estat marcat només amb un fons blau. En el mode de contrast de Windows, les marcades i les buides es veuen iguals. Per què i com s'arregla?

Llista de comprovació final

• Cada camp té un <label> visible associat; cap no depèn del placeholder.
• Els grups d'opcions fan servir <fieldset> i <legend>.
• Els formats, els límits i les ajudes es veuen abans del camp i són a aria-describedby.
• El nom accessible conté el text visible (2.5.3); no hi ha aria-label innecessaris.
• Els errors són en text, al costat del camp, amb aria-invalid i resum enllaçat.
• Després d'un error es conserven totes les dades, inclosos els adjunts.
• Les dades personals porten un autocomplete vàlid (1.3.5).
• Cap dada no es demana dues vegades en el procés (3.3.7).
• L'inici de sessió permet enganxar i fer servir gestors de contrasenyes (3.3.8).
• No hi ha CAPTCHA de text ni controls personalitzats sense patró APG (s'obre en una finestra nova).
• Les vores i els estats tenen un contrast de 3:1 i el focus sempre es veu.
• El formulari funciona al 400 % de zoom i en colors forçats.
• Cada pas indica on ets a l'encapçalament i al <title>.
• Els límits de temps s'avisen i es poden ampliar (2.2.1).
• Canviar un valor mai no envia ni navega sense avís (3.2.2); hi ha revisió abans d'enviar (3.3.4).

Per continuar aprenent

• Tutorial de formularis de la WAI (W3C): etiquetes, agrupació, instruccions, validació i formularis en diverses pàgines.
• Llista de propòsits d'entrada de les WCAG 2.2: els valors que compten per a l'1.3.5.
• Document de comprensió del 3.3.8 Autenticació accessible (mínim).
• Document de comprensió del 2.2.1 Temps ajustable.
• Patrons de l'ARIA Authoring Practices Guide: combobox, switch, slider i date picker.