Criteris WCAG que canvien al mòbil: com avaluar-los en una app

El protocol de la lliçó anterior et diu quines configuracions has de recórrer a cada pantalla. Aquesta lliçó baixa al detall dels criteris l'avaluació dels quals canvia més en una app tàctil: com es provoca l'error, què es considera incompliment i què és només una recomanació de plataforma. Abans, una precisió normativa que convé tenir clara en redactar qualsevol troballa.

WCAG 2.1 a la norma, WCAG 2.2 a la pràctica

L'EN 301 549 v3.2.1 (PDF, s'obre en una finestra nova) incorpora els criteris de WCAG 2.1 de nivell A i AA. Els criteris que va afegir WCAG 2.2 al nivell AA o inferior (2.4.11 Focus no ocult (mínim), 2.5.7 Moviments d'arrossegament, 2.5.8 Mida de l'objectiu (mínim), 3.2.6 Ajuda coherent, 3.3.7 Entrada redundant i 3.3.8 Autenticació accessible (mínim)) avui no formen part del capítol 11. Això no vol dir que els hagis d'ignorar: moltes organitzacions del sector privat demanen WCAG 2.2 AA com a referència, el W3C ha publicat la guia WCAG2ICT actualitzada a la 2.2 i és previsible que futures versions de l'EN els incorporin.

El més recomanable és avaluar-los i presentar-los en un bloc separat de l'informe, etiquetat com a «WCAG 2.2 AA, no exigible per l'EN 301 549 v3.2.1»: així el client distingeix l'obligació legal d'avui del que convé corregir ja.

Orientació, text gran i reajustament

1.3.4 Orientació (11.1.3.4)

Desactiva el bloqueig d'orientació del sistema i gira el dispositiu a cada pantalla de la mostra. Falla la pantalla que no gira o que, en girar, perd contingut o funcionalitat, llevat que una orientació concreta sigui essencial: els documents de comprensió de WCAG citen com a exemples un xec bancari, una aplicació de piano o contingut de realitat virtual. «Queda millor en vertical» no és una raó essencial. La causa sol ser a la configuració del projecte, així que la recomanació és fàcil de donar:

<!-- Android (AndroidManifest.xml). Incorrecte: bloqueja l'activitat en vertical -->
<activity android:name=".CitaActivity"
          android:screenOrientation="portrait" />

<!-- Correcte: sense restricció; la disposició s'adapta -->
<activity android:name=".CitaActivity" />

A iOS, l'equivalent és la llista d'orientacions admeses del projecte (UISupportedInterfaceOrientations al fitxer Info.plist) o el bloqueig programàtic en un controlador concret. Revisa també els casos parcials, com ara una app que força la vertical només al pagament.

1.4.4 Canvi de mida del text (11.1.4.4)

Segons WCAG2ICT, en programari aquest criteri es recolza en l'escalat de la plataforma: l'app ha de respectar la mida de text del sistema fins al 200 % sense pèrdua de contingut ni de funcionalitat. A Android, l'ajust Mida de la lletra arriba al 200 % des d'Android 14. A iOS, Text més gran amb les mides d'accessibilitat activades va més enllà: el 200 % del text de cos queda al voltant de les primeres mides d'accessibilitat. Avalua en dos punts:

• Al 200 %, per decidir si compleix o no compleix: el text creix, res no es talla amb punts suspensius sense manera de llegir-lo complet, res no se superposa i tot és abastable desplaçant-se.
• Al màxim, com a prova de robustesa: el que es trenca només per sobre del 200 % es registra com a recomanació, assenyalant que afecta qui fa servir aquestes mides.

Causes habituals: mides fixes (a iOS, lletres amb mida en punts sense escalat de Dynamic Type; a Android, textSize en dp en lloc de sp), contenidors d'alçada fixa i barres de pestanyes que no creixen. Per a barres que no poden créixer, Apple proposa el visor de contingut gran (en mantenir premut un element, apareix ampliat al centre de la pantalla): documenta si està implementat i tingues-ho en compte en la valoració.

1.4.10 Reajustament dels elements (11.1.4.10)

En una app s'avalua sobretot combinat amb el text gran: els blocs de text no han d'exigir desplaçament en dues direccions per llegir-se. En queden fora, igual que al web, els continguts que necessiten una disposició bidimensional (taules de dades, mapes, diagrames).

Gestos, punter i moviment

Comença per un inventari de tots els gestos que ofereix l'app en ús normal (sense lector de pantalla): lliscar per esborrar o arxivar, pinçar per ampliar, lliscar amb dos dits, arrossegar per reordenar, mantenir premut, sacsejar. Després avalua cadascun amb el criteri que li correspon:

• 2.5.1 Gestos del punter (11.2.5.1): tot gest multipunt o basat en una trajectòria necessita una alternativa amb un sol punter sense trajectòria. El mapa que només s'amplia pinçant falla si no té botons «+» i «−»; la fila que només s'esborra lliscant falla si no hi ha botó o menú. Compte: una acció que només és al menú d'accions del lector de pantalla no n'hi ha prou, perquè no ajuda qui fa servir el dit, un punter bucal o un llapis sense lector. Mantenir premut sí que és un gest d'un sol punter sense trajectòria.
• 2.5.2 Cancel·lació del punter (11.2.5.2): posa el dit sobre un botó, llisca'l fora i aixeca'l. Si l'acció es va executar en tocar, la pantalla falla, llevat que l'acció es pugui desfer o que sigui essencial (les tecles d'un piano). És típic de vistes personalitzades que reaccionen a l'esdeveniment de pulsació inicial.
• 2.5.3 Etiqueta en el nom (11.2.5.3): amb Control per veu (iOS) o Accés per veu (Android), mostra els noms dels elements i digues «tocar» seguit del text visible. Si el botó diu «Demana cita» i el seu nom accessible és «Botó de sol·licitud», l'ordre no funciona.
• 2.5.4 Activació per moviment (11.2.5.4): sacseja i inclina el dispositiu a les pantalles principals. Una funció que s'activa en sacsejar (per exemple, «sacseja per informar d'un error») necessita una alternativa a la interfície i una manera de desactivar la resposta al moviment.
• 2.5.7 Moviments d'arrossegament (WCAG 2.2): reordenar una llista arrossegant, moure un control lliscant personalitzat o desplaçar el mapa necessiten una alternativa amb tocs simples (fletxes, botons, camp numèric).

Mida de l'objectiu: criteri davant de guia de plataforma

Aquí es cometen molts errors d'informe. Convé separar tres llindars:

Llindar	Origen	Com es registra
24 × 24 (o espaiat suficient)	2.5.8 Mida de l'objectiu (mínim), WCAG 2.2 AA. En apps s'equipara a la pràctica amb pt (iOS) i dp (Android).	Per sota, i sense excepció aplicable, error del 2.5.8 al bloc WCAG 2.2.
44 × 44 pt	Guia d'interfície humana d'Apple; és el que avisa l'auditoria de l'Accessibility Inspector.	Recomanació de plataforma.
48 × 48 dp	Directrius de Material Design i Android; és el que avisa Accessibility Scanner.	Recomanació de plataforma.

El criteri AAA 2.5.5 Mida de l'objectiu (millorat), amb 44 × 44, només s'avalua si l'abast l'inclou. Mesura amb el marc de l'element a l'Accessibility Inspector o al Layout Inspector, o activant a Android Opcions per a desenvolupadors > Mostra els límits de disseny. Recorda que el que compta és l'àrea tàctil, que pot ser més gran que la icona visible.

Infografia · Conceptes clau

Vuit criteris que canvien en una interfície tàctil

Què cal comprovar en cadascun en avaluar una app; els marcats 2.2 van en un bloc a part

• 1.3.4 OrientacióGira cada pantalla; només una orientació essencial justifica el bloqueig
• 1.4.4 Mida del textAl 200 %, res tallat ni superposat; el màxim, com a prova de robustesa
• 2.5.1 Gestos del punterPinçaments i lliscaments amb alternativa d'un sol toc
• 2.5.2 Cancel·lacióLliscar fora del botó abans de deixar-lo anar no l'ha d'activar
• 2.5.3 Etiqueta visibleEl control per veu funciona dient el text visible del control
• 2.5.4 MovimentSacsejar o inclinar amb alternativa en pantalla i opció de desactivar-ho
• 2.5.7 Arrossegament (WCAG 2.2)Reordenar o moure controls lliscants també amb tocs simples
• 2.5.8 Objectiu (WCAG 2.2)24 × 24 és el llindar; 44 pt i 48 dp són guies de plataforma

Llegeix la infografia com a text

Vuit targetes, una per criteri. 1.3.4 Orientació: girar cada pantalla; només una orientació essencial justifica bloquejar-la. 1.4.4 Mida del text: al 200 % res no es talla ni se superposa; el màxim del sistema serveix com a prova de robustesa. 2.5.1 Gestos del punter: els pinçaments i els lliscaments necessiten una alternativa amb un sol toc. 2.5.2 Cancel·lació del punter: lliscar el dit fora del botó abans de deixar-lo anar no l'ha d'activar. 2.5.3 Etiqueta en el nom: el control per veu ha de funcionar dient el text visible. 2.5.4 Activació per moviment: sacsejar o inclinar necessita una alternativa en pantalla i una opció de desactivar-ho. 2.5.7 Moviments d'arrossegament, de WCAG 2.2: reordenar o moure controls lliscants també amb tocs simples. 2.5.8 Mida de l'objectiu, de WCAG 2.2: el llindar és 24 per 24; 44 pt i 48 dp són guies de plataforma.

Teclat extern i focus

Amb Accés total amb el teclat a iOS (Configuració > Accessibilitat > Teclats) o un teclat físic connectat a Android, recorre els fluxos crítics amb Tab, fletxes, Espai i Retorn. S'avaluen el 2.1.1 Teclat, el 2.1.2 Sense paranys per al focus del teclat, el 2.4.3 Ordre del focus i el 2.4.7 Focus visible, com vam veure al protocol. Afegeix-hi una comprovació pròpia de WCAG 2.2: 2.4.11 Focus no ocult (mínim). En apps és freqüent que l'element amb focus quedi completament tapat per una barra inferior fixa, un botó flotant o el teclat en pantalla en saltar entre camps. Si queda ocult del tot, és un error del bloc WCAG 2.2.

Resum

• L'EN 301 549 v3.2.1 exigeix WCAG 2.1 A i AA; els criteris nous de WCAG 2.2 s'avaluen i es presenten en un bloc a part, clarament etiquetat.
• 1.3.4: gira cada pantalla amb el bloqueig desactivat; només una orientació essencial justifica bloquejar-la.
• 1.4.4: decideix el compliment al 200 % i fes servir la mida màxima com a prova de robustesa.
• Gestos: fes l'inventari dels de l'app i exigeix alternativa d'un sol punter (2.5.1), cancel·lació (2.5.2), etiqueta en el nom (2.5.3), alternativa al moviment (2.5.4) i a l'arrossegament (2.5.7).
• Mida de l'objectiu: 24 és el llindar de WCAG 2.2; 44 pt i 48 dp són guies de plataforma i es registren com a recomanacions.