Components habituals sota la lupa: quins criteris Perceptible i Operable cal revisar

Fins ara has recorregut els criteris un per un. En una auditoria real, però, el que tens al davant són components: una capçalera amb menú, un bàner de galetes, un carrusel, un formulari, un mapa. Saber de memòria quins criteris de Perceptible i Operable es posen a prova en cada component accelera la revisió i, sobretot, evita buits. Aquesta lliçó és una guia de camp: per a cada component habitual, què cal revisar, amb quina prova i quines fallades cal esperar. Els criteris dels principis Comprensible i Robust (3.x i 4.1.x) es tracten al curs següent; aquí només els esmentem quan la fallada n'és inseparable.

Capçalera, menú i enllaç de salt

És la part que es repeteix a totes les pàgines, així que les seves fallades solen ser globals.

• 2.4.1: enllaç «Salta al contingut» que apareix en rebre el focus i porta realment el focus al contingut principal; o, com a mínim, landmarks (regions com header, nav i main) i encapçalaments.
• 2.1.1 i 1.4.13: submenús que s'obren amb teclat i que, si apareixen en passar el punter, es poden apuntar i tancar amb Escapada.
• 2.4.7, 1.4.11 i 2.4.11: focus visible a cada opció, amb contrast suficient, i no tapat si la capçalera és fixa.
• 1.4.10 i 1.4.4: a 320 px el menú es converteix en un botó de menú operable; al 200 % les opcions no se superposen.
• 2.5.8 i 1.1.1: icones de cerca, idioma o àrea privada amb mida suficient i nom.

Bàner de galetes i altres avisos superposats

És el primer component que troba qualsevol persona i gairebé sempre el proporciona un tercer. Revisa:

• 2.1.1 i 2.1.2: es pot acceptar, rebutjar i configurar amb teclat, i el focus pot sortir de l'avís (o, si és modal, el focus queda a dins de manera intencionada i l'avís es tanca amb els seus botons).
• 2.4.3: si l'avís bloqueja la pàgina, el focus hi ha d'arribar en carregar; si queda al final del DOM, la persona que fa servir el teclat tabula tota la pàgina sense poder prémer res.
• 2.4.11: si no bloqueja, no ha de tapar completament l'element amb focus mentre es tabula per la pàgina; que es pugui tancar amb Escapada no n'hi ha prou, perquè no l'ha obert l'usuari (solucions: fer-lo modal o reservar-li espai amb scroll-padding).
• 1.4.3 i 1.4.11: l'enllaç «Configura» o «Rebutja» en gris clar és una fallada molt repetida; també els interruptors de cada categoria sense contrast d'estat.
• 1.4.10 i 2.5.8: a 320 px i al 400 % tots els seus botons han de continuar sent accessibles, amb desplaçament vertical si cal, i la seva icona de tancament necessita 24 px o espaiat.

Carrusels i contingut en moviment

• 2.2.2: si avança sol i dura més de cinc segons, botó de pausa accessible amb teclat, amb nom i estat.
• 2.5.1 i 2.1.1: fletxes o botons a més del lliscament tàctil, operables amb teclat.
• 1.1.1 i 1.4.5: cada diapositiva amb una alternativa adequada; text real en lloc de text incrustat a la imatge.
• 1.4.11 i 2.5.8: els punts indicadors amb contrast d'estat (quin és actiu) i amb mida o espaiat suficient.
• 1.4.3: el text superposat a la foto es mesura en el punt més desfavorable, a totes les diapositives.

Formularis, des de Perceptible i Operable

• 1.3.1: etiquetes associades, grups d'opcions amb fieldset i legend, obligatorietat indicada al codi.
• 1.3.5: autocomplete amb valors estàndard a les dades de la persona.
• 1.4.1 i 1.4.11: errors no indicats només amb color; vores de camps i caselles amb 3:1.
• 1.4.12: etiquetes llargues i missatges d'error que no es tallen en augmentar l'espaiat.
• 2.5.3 i 2.5.8: nom accessible que conté l'etiqueta visible; caselles i botons d'opció personalitzats amb 24 px o amb espaiat suficient (les caselles natives sense estils estan exemptes, perquè la seva mida la determina el navegador).
• 2.2.1: formularis llargs d'una seu electrònica dins d'una sessió amb límit de temps.

Diàlegs modals

• 2.4.3: el focus entra al diàleg quan s'obre i torna al botó que l'ha obert quan es tanca.
• 2.1.2: se'n pot sortir amb teclat (amb un botó de tancament accessible; Escapada és el que espera la persona usuària segons l'APG (s'obre en una finestra nova)); mentre està obert, mantenir-hi el focus a dins és correcte.
• 1.4.10 i 1.4.4: a 320 px i al 200 % el contingut del diàleg es pot desplaçar i els seus botons continuen a l'abast.
• 1.3.1: el títol del diàleg és un encapçalament o està associat al diàleg al codi.

Multimèdia i mapes

Reproductors de vídeo i àudio: de l'1.2.1 a l'1.2.5 per al contingut; l'1.4.2 si sona sol; el 2.1.1 i el 2.1.2 per als controls (especialment en iframe de plataformes externes); l'1.4.11 per a les icones de control sobre el vídeo; el 2.5.8 per als botons del reproductor.

Mapes interactius: l'1.1.1 exigeix una alternativa a la informació del mapa (per exemple, la llista d'oficines amb la seva adreça); el 2.1.1, el 2.5.1 i el 2.5.7 demanen fer-lo funcionar sense ratolí, sense pinçar i sense arrossegar (botons de zoom i desplaçament); l'1.4.10 l'eximeix del desplaçament bidimensional, però no la resta de la pàgina que el conté.

Taules de dades, gràfics i peu de pàgina

• Taules: 1.3.1 (capçaleres amb th i scope, caption); l'1.4.10 les eximeix del desplaçament en dues dimensions, però la pàgina no ha d'obligar a desplaçar-se en horitzontal per culpa de la taula fora del seu contenidor.
• Gràfics: 1.1.1 amb alternativa breu i descripció o taula de dades; 1.4.1 si la llegenda només fa servir el color; 1.4.11 per a barres, línies i sectors adjacents.
• Peu de pàgina: 1.4.3 en enllaços legals grisos sobre fons fosc; 2.4.4 i 1.1.1 en icones de xarxes socials; 2.5.8 en aquestes mateixes icones en fila.

Resum

• Revisar per components, amb la seva llista de criteris, evita buits i accelera l'auditoria; les fallades de capçalera i peu solen ser globals.
• El bàner de galetes i els ginys de tercers formen part de la pàgina: el 2.1.2 és de no interferència encara que el component sigui extern.
• Carrusels: 2.2.2, 2.5.1, 2.1.1, 1.4.11 i 2.5.8; modals: 2.4.3, 2.1.2 i 1.4.10.
• Els mapes i els gràfics necessiten una alternativa textual (1.1.1) i que es puguin fer funcionar sense gestos ni arrossegament (2.5.1, 2.5.7).
• En formularis, Perceptible i Operable aporten l'1.3.1, l'1.3.5, l'1.4.1, l'1.4.11, el 2.5.3 i el 2.5.8; la resta s'estudia al curs següent.