Cas pràctic, exercicis i llista de comprovació

Aplicaràs el protocol de la lliçó anterior a un cas realista, resoldràs cinc exercicis i t'enduràs una llista de comprovació per als teus projectes.

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

L'Ajuntament de Valdeolmo (fictici) publicarà a la seva seu electrònica un tràmit nou: «Sol·licitar cita prèvia». És una aplicació d'una sola pàgina amb tres passos: (1) servei i oficina, (2) data i hora, (3) dades personals i confirmació. L'equip demana una revisió de teclat abans de publicar-lo. La tasca que es prova és la que faria qualsevol veí: demanar cita per renovar el padró sense fer servir el ratolí.

Pas 1: primera pulsació i enllaç de salt

En prémer Tab per primera vegada, el focus desapareix: és al primer enllaç del menú lateral per a mòbil, que s'amaga fora de la pantalla amb transform. Són 15 parades invisibles abans d'arribar a la capçalera. A més, no hi ha enllaç de salt.

Troballes: focus fantasma (2.4.7 Focus visible, 2.4.3 Ordre del focus) i manca de mecanisme per saltar blocs (2.4.1). Correcció: afegir visibility: hidden al menú tancat, com vam veure a la lliçó sobre com funciona el focus, i un enllaç «Salta al contingut principal» visible quan rep el focus.

Pas 2: recorregut complet

El menú «Tràmits» es desplega amb :hover. Amb teclat no s'obre, però els seus 24 enllaços, amagats amb opacity: 0, es recorren igualment sense veure's. Més avall, en tornar amb Maj+Tab, diversos camps queden tapats per la capçalera fixa de 96 píxels, i el botó «Continua» queda completament cobert per l'avís de galetes, fixat a la part inferior.

Troballes: 2.1.1, 2.4.7 i 2.4.11 Focus no ocult (mínim). Correcció: un botó «Tràmits» amb aria-expanded que mostra o amaga el submenú amb hidden; scroll-padding-top: 96px i scroll-padding-bottom amb l'alçada de l'avís a html; i l'avís de galetes al principi del DOM, perquè es pugui atendre i tancar abans de començar. En redactar l'informe s'anota que el 2.4.11 és un criteri de les WCAG 2.2: l'EN 301 549 v3.2.1 (PDF, s'obre en una finestra nova) es basa en les WCAG 2.1, així que no és exigible per aquesta via, però es registra com a criteri AA de les WCAG 2.2 i es corregeix igualment.

Pas 3: els controls del primer pas

El selector d'oficina és un div que desplega una llista amb el ratolí. Amb Tab no s'assoleix. Troballa: 2.1.1 Teclat i 4.1.2 Nom, funció, valor, de gravetat bloquejant: sense oficina no hi ha cita. Correcció: són 14 oficines, així que el més senzill i robust és un select natiu. Si el disseny exigís cercar per text, seria un combobox amb aria-activedescendant.

Pas 4: el calendari

Cada dia del mes és un button: 31 parades de Tab, i els dies sense forats porten disabled, així que desapareixen de la seqüència sense explicació. És operable, però molt lent amb commutador. Correcció: graella amb roving tabindex: una sola parada (el dia seleccionat o el d'avui), fletxes per moure's per dies i setmanes, Re Pàg i Av Pàg per canviar de mes. Els dies sense forats passen a aria-disabled="true", de manera que es poden recórrer i s'anuncien com a no disponibles. Gravetat: moderada.

Pas 5: el canvi de pas

En prémer «Continua», el pas 2 substitueix el 1. El botó desapareix del DOM, el focus cau al body i el títol de la pestanya no canvia. Troballa: 2.4.3 Ordre del focus; qui fa servir lector creu que no ha passat res. Correcció: a cada pas, document.title = "Pas 2 de 3: data i hora - Cita prèvia - Seu electrònica" i focus a l'h1 del pas amb tabindex="-1".

Pas 6: la confirmació i les dreceres

El diàleg «Vols confirmar la cita?» s'obre afegint una classe: el focus continua al fons, Escapada no el tanca i, en tancar-lo amb la «X», el focus torna al principi de la pàgina. Correcció: <dialog> amb showModal(), focus al seu títol o a «Cancel·la», i focus retornat al botó que l'ha obert. Finalment, en escriure una pregunta al camp «Observacions», cada «?» obre l'ajuda: la drecera d'una sola tecla es dispara dins d'un camp de text i no es pot desactivar (2.1.4). Correcció: ignorar la drecera als camps de text i afegir l'opció de desactivar-la.

Troballa	Criteri	Gravetat
Selector d'oficina inassolible	2.1.1, 4.1.2	Bloquejant
Finestra modal sense gestió del focus	2.4.3	Greu
Focus perdut en canviar de pas	2.4.3	Greu
Botó «Continua» tapat per l'avís de galetes	2.4.11	Greu
Focus fantasma al menú lateral i al submenú	2.4.7, 2.4.3	Greu
Drecera «?» activa als camps de text	2.1.4	Moderada
Calendari amb 31 parades	Bona pràctica	Moderada

Després de corregir, es repeteix cada pas tal com es va registrar abans de tancar la incidència.

Exercicis d'autoavaluació

1. Un acordió tancat s'amaga amb height: 0; overflow: hidden. Quin problema de teclat té i com el resols?

Mostra la solució

Els seus enllaços continuen a la seqüència de Tab encara que no es veuen: focus fantasma (2.4.7). En tancar-lo, afegeix l'atribut hidden (o display: none); si el vols animar, combina l'alçada amb visibility: hidden al final de la transició.

2. El botó «Envia» d'un formulari porta disabled fins que es completen els camps obligatoris. Una persona que tabula no el troba i no sap què falta. Quina alternativa proposes?

Mostra la solució

Fer servir aria-disabled="true", que manté el botó enfocable, amb aria-describedby apuntant a un text que expliqui què falta, i bloquejar l'enviament al gestor de click mentre l'atribut valgui true.

3. Un gestor d'expedients vol la drecera «N» per a «Expedient nou». Enumera les condicions que ha de complir el gestor.

Mostra la solució

Hi ha d'haver un ajust per desactivar-la o reassignar-la (2.1.4); el gestor ha d'ignorar les pulsacions amb Ctrl, Alt o Cmd, les que tenen e.isComposing i les que es produeixen a input, textarea, select o contingut editable; ha de comparar e.key (no e.code) i cridar preventDefault() només per a aquesta tecla. A més, la drecera s'ha de mostrar a la interfície.

4. Una llista de 40 resultats de cerca té tabindex="0" a cada targeta i, a dins, un enllaç al resultat: 80 parades. Cal convertir-la en un component compost amb fletxes?

Mostra la solució

No. És una llista d'enllaços, no un control. N'hi ha prou de treure el tabindex de les targetes: queden 40 parades útils, i el lector de pantalla ja permet saltar d'enllaç en enllaç o per encapçalaments. Si es vol tota la targeta clicable, s'amplia l'àrea de l'enllaç amb CSS.

5. Un botó «Filtres» obre, al seu lloc i sense ser modal, un panell amb caselles. Es vol que el panell es tanqui quan el focus en surti i també amb Escapada. Quin esdeveniment faries servir per al primer cas i on ha de quedar el focus en cada cas?

Mostra la solució

Un gestor de focusout al panell que comprovi si e.relatedTarget n'és fora; en aquest cas es tanca i el focus segueix el seu camí, perquè la persona ja ha anat a un altre lloc. Amb Escapada, en canvi, la persona era a dins: cal tancar el panell i retornar el focus al botó «Filtres», amb aria-expanded="false".

Llista de comprovació

• Totes les tasques principals es completen sense ratolí.
• Cap component no atrapa el focus; si la sortida no és estàndard, s'explica.
• Les dreceres d'una sola tecla es poden desactivar o reassignar i no actuen als camps de text.
• No hi ha tabindex positius ni parades en elements no interactius.
• L'ordre del focus segueix l'ordre de lectura.
• El focus es veu sempre, amb almenys 2 píxels i contrast de 3:1.
• Cap element fix no tapa completament l'element enfocat.
• El que és ocult també surt de la seqüència de tabulació.
• Hi ha un enllaç de salt visible quan rep el focus.
• Cada component compost és una parada i es recorre amb fletxes.
• Les finestres modals mouen, retenen i retornen el focus i es tanquen amb Escapada.
• A cada canvi de vista s'actualitza el títol i el focus va a l'h1.
• Si s'elimina l'element enfocat, el focus passa a un veí amb sentit.
• L'activació és a click i el nom accessible conté el text visible.

Per continuar aprenent

• Understanding 2.1.1 Keyboard (W3C)
• Understanding 2.4.11 Focus Not Obscured (Minimum) (W3C)
• Understanding 3.2.1 On Focus (W3C)
• Developing a Keyboard Interface, ARIA Authoring Practices Guide (W3C)
• L'element dialog a MDN Web Docs