Cas pràctic, exercicis i llista de comprovació

En aquesta lliçó aplicaràs tot el curs a una pàgina real: revisaràs l'estructura d'una fitxa de tràmit, la corregiràs pas a pas i acabaràs amb exercicis i una llista de comprovació que pots fer servir als teus propis projectes.

Cas pràctic: la fitxa «Llicència d'obra menor»

Un ajuntament de mida mitjana publica el seu catàleg de tràmits en un gestor de continguts. La fitxa de la llicència d'obra menor es veu bé, però diverses persones han escrit a la bústia d'accessibilitat dient que «amb el lector de pantalla no hi ha manera de trobar les taxes». En revisar la pàgina amb les eines de desenvolupament i amb NVDA, l'equip troba això:

• El títol de la pestanya és «Seu electrònica» a totes les fitxes.
• <html lang="en">, heretat de la plantilla original.
• No hi ha <main>; la capçalera i el menú són en <div>.
• El nom del tràmit és un <div class="titulo-grande"> i els apartats són <p><strong>.
• La ruta «Inici > Tràmits > Urbanisme > Llicència d'obra menor» està escrita amb caràcters «>».
• Els requisits són paràgrafs que comencen per un guió.
• Les taxes són en una taula sense <caption> i amb la primera fila en <td> amb negreta.
• El mapa de l'oficina és un <iframe> sense title.
• El formulari de cerca apareix a la capçalera i al peu, tots dos amb id="buscar".

Pas 1: la capçalera del document

Es corregeix la plantilla perquè cada fitxa generi el seu títol amb l'específic al davant: «Llicència d'obra menor - Seu electrònica de l'Ajuntament d'Exemple» (2.4.2). Es canvia a lang="es" (3.1.1) i es comprova que el viewport no bloqueja el zoom. Com que és un canvi de plantilla, queda corregit a totes les fitxes alhora.

Pas 2: landmarks i fil d'Ariadna

Capçalera a <header>, menú a <nav aria-label="Principal">, contingut a <main id="contenido"> i peu a <footer>. La ruta passa a ser un <nav aria-label="Fil d'Ariadna"> amb una <ol> i aria-current="page" a l'últim element, amb els separadors en CSS.

Pas 3: encapçalaments i llistes

El nom del tràmit passa a <h1> dins de <main>. Els apartats («Requisits», «Documentació», «Taxes», «Termini de resolució», «On presentar-ho») es converteixen en <h2>, en el mateix ordre que a la resta de fitxes. Els requisits passen a <ul> i els passos per presentar la sol·licitud, a <ol>. Les dades de resum (òrgan, termini, forma de presentació) es marquen amb <dl>.

Pas 4: la taula de taxes

S'afegeix <caption>Taxes de la llicència d'obra menor segons el pressupost de l'obra</caption>, la primera fila passa a <th scope="col"> i la primera columna a <th scope="row">. Ara, quan arriba a un import, NVDA anuncia el tram i el tipus de taxa: era exactament el problema que havia arribat a la bústia.

Pas 5: contingut incrustat i robustesa

El mapa rep title="Mapa d'ubicació de l'Oficina d'Urbanisme" i l'adreça s'afegeix en text. Els dos cercadors es generen amb identificadors diferents (buscar-cabecera, buscar-pie), i el <search> del peu, com que està repetit, rep un nom per distingir-lo. Es valida el DOM generat i es revisa l'arbre d'accessibilitat per confirmar noms i rols.

L'esquelet final de la fitxa queda així:

<main id="contenido">
  <h1>Llicència d'obra menor</h1>
  <dl>…òrgan, termini, presentació…</dl>
  <h2>Requisits</h2>
  <ul>…</ul>
  <h2>Documentació</h2>
  <ul>…</ul>
  <h2>Taxes</h2>
  <table>
    <caption>Taxes de la llicència d'obra menor segons el pressupost de l'obra</caption>
    …
  </table>
  <h2>On presentar-ho</h2>
  <p>Oficina d'Urbanisme: Plaça Major, 1, planta baixa.</p>
  <iframe src="…" title="Mapa d'ubicació de l'Oficina d'Urbanisme"></iframe>
</main>
<aside aria-labelledby="rel">
  <h2 id="rel">Tràmits relacionats</h2>
  …
</aside>

Infografia · Procés

Revisar l'estructura d'una pàgina en 6 passos

L'ordre que va seguir l'equip del cas pràctic i que pots repetir en qualsevol plantilla

1. 1Pas 1: Revisar el documentTítol únic, idioma correcte i viewport que permet ampliar
2. 2Pas 2: Llistar els landmarksUn main, tot el contingut dins de regions i noms diferents si es repeteixen
3. 3Pas 3: Llistar els encapçalamentsUn h1, sense salts de nivell cap avall i textos que descriguin cada secció
4. 4Pas 4: Revisar llistes i taulesLlistes reals; taules de dades amb caption, th i scope
5. 5Pas 5: Validar el marcatgeSense id duplicats, sense interactius imbricats ni atributs mal escrits
6. 6Pas 6: Confirmar-ho a l'arbreRol i nom al tauler d'accessibilitat, i escolta amb un lector de pantalla

Llegeix la infografia com a text

Procés de sis passos en seqüència. Pas 1, revisar el document: títol únic, idioma correcte i viewport que permet ampliar. Pas 2, llistar els landmarks: un únic contingut principal, tot el contingut dins d'alguna regió i noms diferents quan es repeteix un tipus. Pas 3, llistar els encapçalaments: un sol h1, sense salts de nivell cap avall i amb textos que descriguin cada secció. Pas 4, revisar llistes i taules: enumeracions marcades com a llistes reals i taules de dades amb caption, th i scope. Pas 5, validar el marcatge: sense identificadors duplicats, sense elements interactius imbricats ni atributs mal escrits. Pas 6, confirmar-ho a l'arbre d'accessibilitat: comprovar el rol i el nom al tauler del navegador i escoltar la pàgina amb un lector de pantalla.

Exercicis d'autoavaluació

Exercici 1. Un botó de cerca només conté una icona de lupa en SVG amb aria-hidden="true". Al tauler d'accessibilitat apareix amb el rol «button» i el nom buit. Què faries?

Mostra la solució

Donar-li un nom: el millor és text visible («Cerca»); si el disseny només admet la icona, aria-label="Cerca" al botó. Sense nom s'incompleix el 4.1.2 Nom, funció, valor.

Exercici 2. La llista d'encapçalaments d'una pàgina mostra: h1 «Serveis socials», h4 «Ajudes a domicili», h4 «Teleassistència», h2 «Contacte». Què hi ha malament?

Mostra la solució

Hi ha un salt de nivell cap avall d'h1 a h4. «Ajudes a domicili» i «Teleassistència» han de ser h2 (o h3 si pengen d'un h2 intermedi, com «Programes»). La mida visual s'ajusta amb CSS.

Exercici 3. En una botiga en línia, el preu rebaixat es mostra com <del>49 €</del> 35 €. Una persona usuària de lector de pantalla diu que no sap quin és el preu. Per què i com es corregeix?

Mostra la solució

Amb la configuració habitual, el lector no anuncia el ratllat i se sent «49 € 35 €». Cal expressar el significat al text, visible o ocult visualment: «Abans: 49 €», «Ara: 35 €». És un cas de l'1.3.1 Informació i relacions.

Exercici 4. Un portal té un menú principal i un menú de peu amb enllaços legals, tots dos en <nav> sense nom, i el fil d'Ariadna en un <div>. Què canviaries?

Mostra la solució

Donar un nom diferent a cada navegació («Principal», «Enllaços legals») i convertir el fil d'Ariadna en un <nav aria-label="Fil d'Ariadna"> amb llista ordenada i aria-current="page" a la pàgina actual. Així la llista de landmarks permet distingir-les i arribar a cadascuna.

Exercici 5. Un web en català i castellà mostra el selector d'idioma «Català | Castellano». La versió en castellà té <html lang="ca">. Quins problemes hi ha?

Mostra la solució

El lang del document no coincideix amb el seu idioma real (3.1.1): el castellà es llegirà amb veu catalana. L'enllaç «Català» ha de portar lang="ca" (3.1.2) i hreflang="ca". I la barra vertical es llegirà com a text: els enllaços del selector han de ser una llista, amb el separador en CSS.

Llista de comprovació

• Cada pàgina té un title únic amb l'específic al davant.
• html lang és vàlid i coincideix amb l'idioma real; els fragments en un altre idioma porten el seu lang.
• El viewport no impedeix ampliar.
• Hi ha un únic main i tot el contingut és dins d'algun landmark.
• Els landmarks repetits tenen noms diferents.
• Hi ha un sol h1, sense salts de nivell cap avall, i els textos descriuen cada secció.
• Les enumeracions són ul, ol o dl reals.
• Les taules de dades tenen caption, th i scope.
• Cap significat no depèn només de negreta, ratllat o color.
• El fil d'Ariadna i la paginació són nav amb nom i aria-current.
• Hi ha almenys dues vies per arribar a cada pàgina.
• Tot iframe té un title descriptiu.
• No hi ha identificadors duplicats ni elements interactius imbricats.
• L'ordre del codi coincideix amb l'ordre visual i lògic.
• Cada control té el rol i el nom correctes a l'arbre d'accessibilitat.

Per continuar aprenent

• Page Structure Tutorial (W3C WAI): regions, encapçalaments i estructura del contingut, amb exemples de codi.
• Tables Tutorial (W3C WAI): taules simples, irregulars i amb diversos nivells d'encapçalaments.
• HTML Accessibility API Mappings (W3C): com es tradueix cada element HTML a rols i noms a l'arbre d'accessibilitat.
• Breadcrumb Pattern (W3C APG (s'obre en una finestra nova)): el patró de fil d'Ariadna amb el seu exemple de codi.
• WCAG 2.2 (W3C): el text oficial de tots els criteris citats al curs.