Cas pràctic, exercicis i llista de comprovació

És el moment d'aplicar tot el curs a un cas complet. Revisaràs i corregiràs, component per component, la fitxa de producte d'una botiga en línia de calçat (fictícia). Des del 28 de juny de 2025, el comerç electrònic és dins de l'àmbit de la Llei 11/2023 (PDF, s'obre en una finestra nova), així que aquest tipus de pàgina és avui una prioritat per a moltes empreses espanyoles. Després posaràs a prova el que has après amb exercicis i t'enduràs una llista de comprovació per als teus propis projectes.

Cas pràctic: la fitxa de producte d'una sabateria en línia

La pàgina mostra unes sabatilles de muntanya. L'equip de desenvolupament demana una revisió abans d'una campanya. Aquests són els components interactius que conté i el que trobem en provar-los amb teclat, amb NVDA i amb un mòbil amb TalkBack.

Pas 1. Inventari: cada component amb el seu patró

Component	Què falla	Patró correcte	Criteris
Cercador amb suggeriments	Els suggeriments són <div> sense rols; quan apareixen, el focus salta al primer	Combobox d'ARIA 1.2 amb listbox	4.1.2, 2.1.1, 3.2.2
Galeria de fotos	Gira tota sola cada 3 segons sense pausa; les miniatures són <div> amb onclick	Sense rotació automàtica; miniatures com a botons amb nom	2.2.2, 2.1.1, 4.1.2
Selector de talla	Quadres clicables; la talla triada només canvia de color; les esgotades només apareixen ratllades	Botons d'opció natius en un <fieldset>	1.3.1, 1.4.1, 4.1.2
Quantitat	Botons «−» i «+» sense nom; al màxim, el «+» s'inhabilita i el focus es perd	Camp numèric amb botons amb nom i regió d'estat	4.1.2, 2.4.3, 4.1.3
«Afegeix a la cistella»	És un <a href="#">; obre un panell lateral que no rep el focus	Botó que obre un diàleg modal	4.1.2, 2.4.3
Pestanyes Descripció, Composició i Opinions	<li onclick> sense rols ni teclat	Patró de pestanyes o seccions amb encapçalaments	1.3.1, 2.1.1, 4.1.2
Valoració mitjana	Cinc icones SVG sense text alternatiu	Text «4,6 de 5 estrelles (128 opinions)»	1.1.1

Pas 2. Corregir, del que és natiu al que és personalitzat

La regla del curs marca l'ordre: primer el que s'arregla canviant d'element, després el que exigeix un patró APG (s'obre en una finestra nova).

• Talla: se substitueixen els quadres per botons d'opció reals, estilitzats com a quadres. La talla esgotada es manté a la llista amb disabled i amb el text «esgotada» dins de l'etiqueta, no només ratllada.
• Valoració: el text «4,6 de 5 estrelles (128 opinions)» es mostra al costat de les icones, que passen a ser decoratives (aria-hidden="true").
• «Afegeix a la cistella»: passa a ser <button type="button" aria-haspopup="dialog">. El panell lateral s'implementa amb <dialog> i showModal(), títol «Afegit a la teva cistella», botons «Continua comprant» i «Mostra la cistella», i retorn del focus en tancar.
• Quantitat: botons «Redueix la quantitat» i «Augmenta la quantitat», aria-disabled als límits i la regió d'estat «Quantitat: 3».
• Galeria: s'elimina la rotació automàtica; les miniatures són botons («Foto 2 de 5: vista lateral») amb aria-pressed a la que es mostra.
• Pestanyes: com que cada secció és breu i convé enllaçar les opinions des de la valoració, l'equip opta per seccions amb <h2> i un enllaç «Mostra les 128 opinions». Menys codi i millor al mòbil.
• Cercador: es reconstrueix com a combobox d'ARIA 1.2: focus sempre al camp, aria-activedescendant cap al suggeriment ressaltat i una regió d'estat amb el nombre de resultats.

<fieldset>
  <legend>Talla</legend>
  <input type="radio" name="talla" id="t41" value="41">
  <label for="t41">41</label>
  <input type="radio" name="talla" id="t42" value="42" disabled>
  <label for="t42">42 (esgotada)</label>
  <input type="radio" name="talla" id="t43" value="43">
  <label for="t43">43</label>
</fieldset>

Pas 3. Tornar a provar com al principi

La segona passada repeteix exactament les proves inicials: teclat (una parada per grup de talles, fletxes per triar, Escape al diàleg), lector de pantalla (cada control amb nom, rol i estat) i punter (objectius de 24 per 24 píxels CSS com a mínim i res que exigeixi arrossegar). Resultat: els set problemes queden resolts i, de passada, la pàgina té menys JavaScript que abans, perquè diverses de les correccions van consistir a tornar a l'HTML natiu.

Exercicis d'autoavaluació

1. Una barra d'eines d'un editor té vuit botons de format, tots amb tabindex="0", i a més respon a les fletxes. Què canviaries?

Mostra la solució

Aplicar el roving tabindex de manera completa: tabindex="0" només al botó actiu i -1 als altres, actualitzant-lo en moure's amb fletxes o en fer clic. El contenidor porta role="toolbar" i un nom. Així la barra és una sola parada de Tab.

2. En un cercador de municipis, en escriure «Car» apareixen suggeriments i el focus passa automàticament a «Cartagena». Quin problema hi ha i com es corregeix?

Mostra la solució

La persona perd la possibilitat de continuar escrivint i sent un anunci inesperat. El focus del DOM s'ha de quedar al camp (role="combobox"); només Fletxa avall ressalta opcions, mitjançant aria-activedescendant, i Retorn accepta.

3. Un interruptor canvia el seu text d'«Activa els avisos» a «Desactiva els avisos» i, a més, porta aria-checked. És correcte?

Mostra la solució

No. El lector diria, per exemple, «Desactiva els avisos, activat», que és contradictori. Amb role="switch" el nom és fix («Avisos») i l'estat el comunica aria-checked.

4. A l'arbre de carpetes d'un gestor documental, cada fitxer PDF s'anuncia com a «contret». Quin atribut sobra i on?

Mostra la solució

Sobra aria-expanded als nodes fulla (els fitxers). Aquest estat només ha d'estar als nodes que tenen fills.

5. El filtre de preu d'una botiga és un control lliscant de dos cursors que només es mou arrossegant. Proposa dues alternatives que compleixin 2.5.7.

Mostra la solució

Per exemple: permetre fer clic o tocar a la pista per moure el cursor més proper a aquell punt, i oferir dos camps numèrics («Preu mínim», «Preu màxim») al costat del control lliscant. A més, cada cursor ha de respondre a les fletxes per complir 2.1.1.

6. Un llistat de factures només de lectura té role="grid", però les fletxes no fan res. Què recomanes?

Mostra la solució

Treure role="grid" i deixar una <table> nativa amb les seves capçaleres. Un llistat que només es llegeix no necessita navegació per cel·les, i el rol sense teclat impedeix llegir la taula amb normalitat.

Llista de comprovació

• Cada acció és un <button> i cada navegació un <a href>.
• Abans de crear un control, s'ha descartat l'equivalent natiu.
• Cada control té un nom que s'entén fora de context i inclou el text visible.
• Els estats (aria-expanded, aria-pressed, aria-selected, aria-checked) s'actualitzen a cada canvi.
• Cada giny compost és una sola parada de Tab i es recorre amb fletxes.
• El teclat de cada component coincideix amb el seu patró de l'APG.
• Els menús, els desplegables i els diàlegs es tanquen amb Escape i retornen el focus.
• El focus no es perd mai en eliminar, inhabilitar o amagar elements.
• Els combobox mantenen el focus al camp i anuncien el nombre de resultats.
• Els controls de valor exposen el valor i els límits, i es poden fixar sense arrossegar.
• El contingut que apareix amb el punter o el focus és descartable, accessible amb el punter i persistent.
• Res no es mou més de 5 segons sense un control per posar-ho en pausa.
• Els objectius mesuren almenys 24 per 24 píxels CSS o tenen prou separació.
• S'ha provat cada component amb teclat, amb un lector de pantalla i en un mòbil.

Per continuar aprenent

• ARIA Authoring Practices Guide: patrons, amb exemples funcionals de cada component.
• WAI-ARIA 1.2, l'especificació de rols, estats i propietats.
• ARIA in HTML, quins rols admet cada element HTML i quins són redundants.
• WCAG 2.2, la recomanació del W3C.
• Understanding 2.5.7 Dragging Movements, amb exemples d'alternatives sense arrossegament.