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: l'avaluació de l'app de cita prèvia d'un ajuntament, publicada a iOS i Android. Després tindràs cinc exercicis amb la seva solució, una llista de comprovació per a la teva propera avaluació d'app i recursos oficials per continuar aprenent.

Cas pràctic: l'app de cita prèvia de Villaserena

L'Ajuntament de Villaserena (municipi fictici), obligat pel RD 1112/2018 (PDF, s'obre en una finestra nova), encarrega l'avaluació de la seva app «Villaserena Cita» abans de renovar la declaració d'accessibilitat. L'app permet demanar cita a les oficines municipals, consultar i cancel·lar cites i veure un mapa d'oficines. Segons el contacte tècnic, la versió iOS està feta en SwiftUI i la versió Android en Flutter.

Pas 1: pla, inventari i mostra

Fixes la referència: EN 301 549 v3.2.1 (PDF, s'obre en una finestra nova), capítol 11 i clàusules aplicables dels capítols 7 i 12, amb WCAG 2.2 AA com a bloc addicional acordat. Abast: versió 3.1 (compilació 412), les dues últimes versions principals de cada sistema, un iPhone i un Android de Google com a dispositius principals i un Samsung de gamma mitjana com a segon dispositiu. L'exploració dona 22 pantalles. Mostra estructurada: 10 pantalles (inici, accés amb codi per SMS, ajustos, accessibilitat, selecció de tràmit, calendari, selecció d'hora, confirmació, «Les meves cites» i mapa d'oficines amb la seva llista), més 1 d'aleatòria sortejada sobre la resta (avís de manteniment). Fluxos crítics: demanar cita i cancel·lar cita. Demanes una compilació Android de depuració amb el depurador de semàntica de Flutter disponible.

Pas 2: passada automàtica

L'auditoria de l'Accessibility Inspector i Accessibility Scanner retornen dos tipus d'avís: set icones de 40 × 40 (dp a Android, pt a iOS) i el text gris «Places lliures» amb un contrast de 3,1:1. Les icones superen els 24 × 24 del 2.5.8, així que les registres com a recomanació de plataforma. El contrast és un error de l'11.1.4.3. Cap eina no avisa de res al calendari.

Pas 3: protocol manual i criteris mòbils

• H-01 · Calendari (només Android). TalkBack anuncia cada dia només amb el seu número («14»), sense mes, sense rol de botó i sense indicar si queden cites. El depurador de semàntica mostra nodes amb aquesta única etiqueta i l'equip confirma que cada dia és un GestureDetector sense Semantics. A iOS, el calendari fa servir el selector de data del sistema i funciona. Impedeix demanar cita: crític, 11.4.1.2 i 11.5.2.5.
• H-02 · Tota l'app. No gira a horitzontal a cap plataforma i no hi ha raó essencial: mitjana, 11.1.3.4.
• H-03 · Barra de pestanyes (iOS). Al 200 %, les etiquetes es tallen amb punts suspensius i no hi ha visor de contingut gran: mitjana, 11.1.4.4.
• H-04 · Confirmació (iOS). L'avís propi «Cita reservada» apareix i desapareix sense que VoiceOver l'anunciï: alta, 11.4.1.3.
• H-05 · Les meves cites (totes dues). Cancel·lar només és possible lliscant la fila; els lectors ofereixen una acció, però no hi ha alternativa per a qui fa servir l'app sense lector: alta, 11.2.5.1.
• H-06 · Accés (totes dues). El camp del codi no es proposa automàticament des de l'SMS i no admet enganxar: 11.1.3.5 (alta) i, al bloc WCAG 2.2, 3.3.8.
• Mapa. La llista d'oficines amb adreça i horari és accessible, així que el mapa pot figurar com a exclòs a la declaració.

Pas 4: atribució i recomanacions

L'H-01 es reprodueix al Samsung i a les dues versions d'Android: és un error de l'app. Com que l'equip Android treballa en Flutter, la recomanació va en Dart:

// Incorrecte: zona tàctil sense semàntica
GestureDetector(onTap: () => elegir(dia), child: Text('${dia.day}'))

// Correcte: botó amb data completa i estat
Semantics(
  button: true,
  label: '${formatoLargo(dia)}, ${libre ? "amb cites lliures" : "sense cites"}',
  selected: dia == seleccionado,
  child: GestureDetector(onTap: () => elegir(dia), child: Text('${dia.day}')),
)

Per a l'H-04, la recomanació a iOS és enviar un anunci d'accessibilitat en mostrar l'avís; per a l'H-05, un botó «Cancel·la la cita» al detall; per a l'H-06, textContentType = .oneTimeCode a iOS i la marca d'emplenament automàtic equivalent a Android, sense bloquejar l'enganxament.

Pas 5: informe i declaració

Resum executiu: no conforme a Android (el flux «demanar cita» no es pot completar amb TalkBack) i parcialment conforme a iOS. La declaració, enllaçada des de les dues botigues, el menú «Accessibilitat» de l'app i el web municipal, llista cada incompliment amb el seu requisit i la data prevista de correcció, el mapa com a contingut exclòs amb la seva alternativa, el mètode (avaluació externa) i el canal de comunicació.

Exercicis

1. Una app té 30 pantalles a l'inventari i la teva mostra estructurada en reuneix 15. Quantes pantalles aleatòries hi afegeixes i com les tries?

Mostra la solució

Al voltant del 10 % de l'estructurada: 2 pantalles. Numeres les 15 que no són a la mostra, les sorteges amb un generador de nombres aleatoris i documentes el mètode al pla.

2. Accessibility Scanner avisa que un botó d'icona fa 40 × 40 dp. Com ho registres?

Mostra la solució

Com a recomanació de plataforma (Material proposa 48 × 48 dp). Compleix el 2.5.8 Mida de l'objectiu (mínim), el llindar del qual és 24 × 24, i no és un incompliment de l'EN 301 549 v3.2.1.

3. Una app bancària mostra «Servei d'accessibilitat detectat» i tanca la sessió quan TalkBack està actiu. Quin requisit incompleix i què recomanes?

Mostra la solució

L'11.6.2, perquè interfereix amb les funcions d'accessibilitat de la plataforma; severitat crítica. Recomanes protegir les vistes sensibles amb accessibilityDataSensitive en lloc de bloquejar tots els serveis.

4. Una app feta amb Capacitor passa Accessibility Scanner sense avisos. Pots concloure que el contingut és accessible?

Mostra la solució

No. El contingut és web dins d'una WebView: l'has d'inspeccionar en remot (chrome://inspect o Safari), avaluar-lo amb els criteris WCAG de contingut web i fer les proves manuals amb lector de pantalla. El contenidor natiu s'avalua amb el capítol 11.

5. Una fila s'esborra lliscant i VoiceOver ofereix l'acció «Elimina» al rotor. Compleix el 2.5.1 Gestos del punter?

Mostra la solució

No. L'acció del lector només ajuda qui el fa servir; una persona que fa servir l'app amb un dit o un punter sense lector necessita una alternativa d'un sol punter sense trajectòria, com ara un botó o el menú que apareix en mantenir premut.

Llista de comprovació final

• Pla validat: referència, abast, mostra i matriu de cobertura.
• Versió i compilació anotades a cada evidència.
• Tecnologia de cada capa identificada.
• Llista de requisits del capítol 11 sense els criteris buits.
• Passada automàtica feta i avisos classificats.
• Lector de pantalla a tota la mostra, a les dues plataformes.
• Text al 200 % i al màxim, rotació i mode fosc revisats.
• Gestos inventariats i alternatives comprovades.
• Fluxos crítics completats amb cada tecnologia de suport.
• Accés, avisos i contingut de tercers avaluats.
• Troballes crítiques i altes reproduïdes en un altre dispositiu.
• WCAG 2.2 presentat en un bloc a part.
• Recomanacions en el llenguatge de l'equip.
• Declaració enllaçada des de les botigues, l'app i el web.

Per continuar aprenent

• WCAG2ICT: aplicació de WCAG 2.2 a les TIC no web (W3C)
• WCAG-EM: metodologia d'avaluació de conformitat (W3C)
• EN 301 549 v3.2.1 (ETSI, PDF)
• Reial decret 1112/2018, text consolidat (BOE)
• Provar l'accessibilitat d'una app Android (Android Developers)