Cas pràctic, exercicis i llista de comprovació

Aquesta lliçó aplica el curs complet a un encàrrec realista. Primer veuràs un cas resolt pas a pas amb els cinc passos de WCAG-EM (s'obre en una finestra nova); després, cinc exercicis per comprovar el que has après, una llista de comprovació per a la teva pròxima auditoria i recursos oficials per continuar aprofundint-hi.

Cas pràctic: el web de venda de bitllets d'una empresa d'autobusos

TransMeseta (empresa fictícia) opera línies regulars d'autobús de llarg recorregut entre diverses comunitats autònomes. Els seus serveis de venda en línia són dins de l'àmbit de la Llei 11/2023 (PDF, s'obre en una finestra nova), aplicable des del 28 de juny de 2025, i la direcció encarrega una auditoria per conèixer-ne la situació. Té un portal informatiu (www.transmeseta.example), una aplicació de compra feta amb un framework de JavaScript (compra.transmeseta.example) i una app nativa per a mòbil.

Pas 1: abast

• Lloc: portal i aplicació de compra. L'app nativa en queda fora, perquè s'avaluarà amb la seva pròpia metodologia (nivell 6), i així es diu expressament.
• Nivell objectiu: WCAG 2.2 AA. S'informa a més de la correspondència amb l'EN 301 549 v3.2.1 (PDF, s'obre en una finestra nova), que remet a WCAG 2.1 AA, perquè el resultat serveixi en tots dos marcs.
• Línia de base: Windows 11 amb NVDA i Chrome i Firefox, i amb JAWS i Chrome; iOS amb VoiceOver i Safari; Android amb TalkBack i Chrome; zoom al 200 % i al 400 % i Control per veu d'iOS. Versions fixades el primer dia.
• Requisits addicionals: avaluar el bitllet electrònic en PDF que s'envia per correu.
• Dades de prova: entorn de preproducció congelat, targeta de proves de la passarel·la i dos usuaris registrats.

Pas 2: exploració

L'inventari identifica 9 plantilles (inici, llistat de destinacions, fitxa de destinació, horaris, notícies, ajuda, contacte, resultats de cerca de viatges i àrea de client) i diversos components crítics: cercador de viatges amb autocompletat d'origen i destinació, selector de data, selector gràfic de seients, bàner de galetes d'un proveïdor extern i xat d'atenció d'un tercer. Hi ha a més un mapa de parades incrustat, 140 PDF d'horaris i tres processos: comprar un bitllet, registrar-se i canviar un bitllet.

Pas 3: mostra

La mostra estructurada té 21 elements: 7 pàgines comunes (inici, contacte, ajuda, avís legal, accessibilitat, mapa web i cercador del portal), una instància de cadascuna de les altres 6 plantilles, 2 PDF d'horaris de línies diferents, el bitllet en PDF i 5 estats (autocompletat obert, calendari obert, seient seleccionat, error en les dades dels viatgers i pagament rebutjat). Els tres processos hi entren complets; la compra té 6 passos: cerca, resultats, seients, dades dels viatgers, pagament a la passarel·la i confirmació amb el bitllet. La mostra aleatòria la formen 2 pàgines preses a l'atzar del sitemap, aproximadament el 10 %.

Pas 4: avaluació i comparació

• El selector gràfic de seients no és operable amb teclat: 2.1.1 Teclat, no compleix. Com que és el pas 3 de la compra, el procés de compra sencer és no conforme.
• L'autocompletat funciona amb NVDA i JAWS, però amb VoiceOver a iOS els suggeriments no s'anuncien ni es poden triar: 4.1.2 Nom, funció i valor, no compleix, amb la combinació indicada a la troballa.
• Els errors de les dades dels viatgers es marquen només amb una vora vermella: 1.4.1 Ús del color i 3.3.1 Identificació d'errors, no compleixen.
• La passarel·la de pagament, d'una entitat bancària, s'avalua com a part del procés: incompleix 2.4.7 Focus visible. És contingut de tercers, però triat per l'empresa, que en respon.
• Els enllaços del peu, component global, tenen un contrast de 3,1:1: 1.4.3 Contrast (mínim), no compleix en totes les pàgines.

En la comparació, una de les pàgines aleatòries és una fitxa d'«oferta d'estiu» amb la taula de preus en imatge, plantilla que no estava inventariada. S'amplia la mostra amb dues fitxes d'oferta, s'avaluen (incompleixen 1.1.1 Contingut no textual i 1.4.5 Imatges de text) i es documenta l'ampliació.

Pas 5: resultats

Cap pàgina de la mostra no és conforme AA, pel peu, i el procés de compra no és conforme. Com que no s'arriba al nivell objectiu, no escau emetre una declaració d'avaluació de WCAG-EM; la conclusió de l'informe diu: «Segons l'avaluació feta entre el 3 i el 14 de febrer sobre 25 elements (21 de la mostra estructurada, 2 d'aleatoris i 2 d'afegits després de la comparació) i 3 processos complets, amb la línia de base indicada, el lloc no arriba a la conformitat amb WCAG 2.2 AA. Dos dels incompliments impedeixen completar la compra». S'hi adjunta l'informe exportat des de la WCAG-EM Report Tool.

Exercicis d'autoavaluació

1. El director comercial proposa treure el selector de seients de l'abast, perquè «si no tries seient, el sistema te n'assigna un». Canvia el veredicte?

2. A mitja auditoria, desenvolupament publica una nova versió del cercador de viatges en preproducció. Què feu?

3. Un avaluador marca l'1.2.2 Subtítols (enregistrat) com a «compleix» a la pàgina d'horaris, que no té vídeo. És correcte?

4. El desenvolupador de l'autocompletat diu que l'error amb VoiceOver «és un error d'Apple» i que el seu codi segueix el patró de l'APG (s'obre en una finestra nova). Com ho registres?

5. Màrqueting vol anunciar «El nostre web és accessible al 92 %». Què li recomanes?

Llista de comprovació

• L'abast indica què hi entra, què en queda fora i per què.
• El nivell objectiu i els requisits addicionals són per escrit.
• La línia de base reflecteix el públic i té versions fixades.
• Tinc dades de prova per a tots els processos abans de començar.
• L'inventari cobreix plantilles, components, tercers, documents i processos.
• He explorat també l'àrea privada i la versió mòbil.
• Cada element de la mostra té el seu motiu d'inclusió.
• Els processos són complets, de la primera pantalla a la confirmació.
• La mostra aleatòria és d'un 10 % aproximat i es va triar a l'atzar.
• Avaluo primer els components globals.
• Faig servir cinc resultats i no deixo res «no comprovat» sense explicar.
• Cada troballa indica pàgina o estat, criteri, combinació i evidència.
• He comparat la mostra aleatòria i he documentat qualsevol ampliació.
• La declaració d'avaluació no promet més del que s'ha avaluat.

Per continuar aprenent

• WCAG Evaluation Methodology (WCAG-EM) (W3C): el text complet de la metodologia en la seva versió vigent (2.0, juliol de 2026), amb els seus cinc passos i subpassos i l'enllaç a la versió 1.0 de 2014.
• WCAG-EM Report Tool (W3C WAI): assistent que guia pels cinc passos i genera l'informe, també en format llegible per màquina.
• Understanding Conformance (W3C WAI): requisits de conformitat, compatibilitat amb l'accessibilitat i conformitat parcial.
• ACT Rules (W3C WAI): regles de prova revisades que ajuden que auditors diferents arribin al mateix resultat.
• Decisió d'Execució (UE) 2018/1524 (EUR-Lex): el mètode de seguiment de l'accessibilitat dels llocs web del sector públic.