Navegació i modalitats d'entrada: 2.4.x i 2.5.x, amb els nous 2.4.11, 2.5.7 i 2.5.8

Les pautes 2.4 (navegable) i 2.5 (modalitats d'entrada) reuneixen els criteris que determinen si una persona es pot orientar, trobar el que busca i accionar els controls amb el dispositiu que faci servir. Les WCAG 2.2 hi van afegir tres criteris de nivell AA que ja formen part de les auditories: 2.4.11 Focus no ocult (mínim), 2.5.7 Moviments d'arrossegament i 2.5.8 Mida de l'objectiu (mínim). Aquesta lliçó els recorre amb les seves mesures i excepcions exactes.

Pauta 2.4 Navegable

• 2.4.1 Evitar blocs (A): mecanisme per saltar blocs repetits (capçalera, menú). Tècniques: enllaç «Salta al contingut» visible en rebre el focus, landmarks (main, nav) i encapçalaments. Fallada: cap mecanisme; enllaç de salt la destinació del qual no existeix o no porta realment al contingut principal (en navegadors antics, també la destinació no enfocable, sense tabindex="-1").
• 2.4.2 Pàgina titulada (A): <title> que descriu el tema o el propòsit. Fallades: el mateix títol a totes les pàgines, només el nom de l'organisme, títols no actualitzats en SPA en canviar de vista.
• 2.4.3 Ordre del focus (A): si l'ordre de navegació afecta el significat o l'operació, el focus segueix un ordre coherent. Fallades: tabindex positius, modals que no reben el focus en obrir-se, focus que torna a l'inici després de tancar un diàleg, elements amagats visualment que reben el focus.
• 2.4.4 Propòsit dels enllaços (en context) (A): el propòsit es dedueix del text de l'enllaç o del seu context determinable programàticament (la mateixa frase, paràgraf, cel·la, element de llista o encapçalament precedent). Fallades: «llegeix-ne més» repetits sense context programàtic, «aquí», URL en brut, icones sense nom.
• 2.4.5 Múltiples vies (AA): almenys dues maneres de localitzar una pàgina (menú, cercador, mapa web), tret dels passos d'un procés.
• 2.4.6 Encapçalaments i etiquetes (AA): si n'hi ha, descriuen el tema o el propòsit; «Secció 1» o «Camp» no ho fan.
• 2.4.7 Focus visible (AA): qualsevol interfície operable amb teclat té un mode en què l'indicador de focus és visible. Fallades: outline: none sense substitut; indicador que depèn d'un color de fons que no canvia en alguns temes.

2.4.11 Focus no ocult (mínim) (AA) — nou a la 2.2

Quan un component rep el focus del teclat, no ha de quedar completament ocult per contingut creat per l'autor. El criteri no té excepcions formals, però les seves notes precisen dos casos: només es consideren les posicions inicials del contingut que l'usuari pot moure, i el contingut que ha obert el mateix usuari (un xat, un tauler) pot tapar el focus si l'usuari pot descobrir l'element sense moure el focus, per exemple tancant-lo amb Escapada. Un bàner de galetes o una capçalera fixa que posa l'autor sense acció de l'usuari no entra en aquesta nota: segons Comprendre les WCAG 2.2, el bàner ha de ser modal o no arribar a tapar completament l'element amb focus. Fixa't en «completament»: a nivell AA s'admet que estigui parcialment tapat; el criteri AAA 2.4.12 exigeix que no estigui ocult en absolut.

On falla: capçaleres i peus fixos (sticky) que tapen l'element amb focus en tabular; bàners de galetes o xats flotants que cobreixen controls. Prova: tabula per tota la pàgina a mida normal i al 400 %, observant si l'element amb focus és sempre visible almenys en part. Correcció: scroll-padding-top igual a l'altura de la capçalera fixa.

Pauta 2.5 Modalitats d'entrada

• 2.5.1 Gestos del punter (A): tota funció que faci servir gestos multipunt (pinçar) o basats en una trajectòria (lliscar) s'ha de poder fer funcionar amb un únic punter sense trajectòria (tocs, clics), tret que el gest sigui essencial. Carrusels només amb lliscament sense fletxes, mapes només amb pinçament sense botons de zoom.
• 2.5.2 Cancel·lació del punter (A): la funció no s'executa en l'esdeveniment de baixada (mousedown, touchstart), o es completa en la pujada i es pot avortar o desfer, o la pujada reverteix la baixada, o la baixada és essencial. Permet que una persona amb tremolor rectifiqui movent el dit fora abans de deixar anar.
• 2.5.3 Etiqueta en el nom (A): el nom accessible dels components amb etiqueta visible de text conté aquest text (idealment comença per ell). Afecta el control per veu. Fallades: aria-label que substitueix el text visible en lloc de complementar-lo, botons amb un text visible diferent del nom.
• 2.5.4 Activació per moviment (A): les funcions que s'activen movent el dispositiu (sacsejar per desfer) o per moviment davant la càmera han de tenir una alternativa d'interfície i s'han de poder desactivar, tret que el moviment sigui essencial.

2.5.7 Moviments d'arrossegament (AA) — nou a la 2.2

Tota funcionalitat que faci servir un moviment d'arrossegament s'ha de poder dur a terme amb un únic punter sense arrossegar, tret que l'arrossegament sigui essencial o el determini l'agent d'usuari i no l'hagi modificat l'autor. Complementa el 2.5.1 (que tracta trajectòries i multipunt, però no l'arrossegament simple) i el 2.1.1 (teclat). On apareix: reordenar targetes (kanban), controls lliscants de preu, mapes, retalladors d'imatge, signatura manuscrita (essencial). Alternatives vàlides: botons de pujar i baixar, menú «mou a», camps numèrics al costat del control lliscant, botons de desplaçament al mapa. Que funcioni amb teclat no n'hi ha prou per al 2.5.7, que exigeix una alternativa de punter simple (tocs o clics): moltes persones amb tremolor fan servir pantalla tàctil sense teclat.

2.5.8 Mida de l'objectiu (mínim) (AA) — nou a la 2.2

Els objectius d'entrada amb punter han de mesurar almenys 24 per 24 píxels CSS, tret que es compleixi alguna excepció:

• Espaiat: els objectius de menys de 24 × 24 són acceptables si un cercle de 24 px de diàmetre centrat en cadascun no se superposa amb cap altre objectiu ni amb el cercle d'un altre objectiu.
• Equivalent: la mateixa funció es pot dur a terme mitjançant un altre control de la mateixa pàgina que sí que compleix.
• En línia: l'objectiu és dins d'una frase o la seva mida la determina l'altura de línia del text que no és objectiu (enllaços en un paràgraf).
• Control de l'agent d'usuari: la mida la determina el navegador i no l'ha modificada l'autor.
• Essencial: una presentació concreta és essencial o legalment requerida.

Com mesurar: amb l'inspector del navegador, llegeix les dimensions de l'àrea clicable (inclòs el padding, però no el marge); per a icones petites amb espaiat, mesura la distància entre centres (ha de ser almenys de 24 px). Fallades típiques: icones de 16 × 16 enganxades en barres d'eines, punts d'un carrusel, icones de tancament d'avisos, caselles de 13 px sense etiqueta clicable, icones de xarxes socials al peu.

Resum

• 2.4.1-2.4.7: saltar blocs, títols descriptius, ordre del focus coherent, propòsit dels enllaços en context, múltiples vies, encapçalaments i etiquetes descriptius, focus visible.
• 2.4.11: l'element amb focus no pot quedar completament ocult per contingut fix o flotant de l'autor; es corregeix amb scroll-padding o amb bàners modals.
• 2.5.1-2.5.4: alternativa als gestos complexos, cancel·lació en l'esdeveniment de pujada, nom accessible que conté l'etiqueta visible, alternativa a l'activació per moviment.
• 2.5.7: tot arrossegament necessita una alternativa amb punter simple (no n'hi ha prou amb el teclat), tret que sigui essencial.
• 2.5.8: objectius de 24 × 24 px CSS, o excepció d'espaiat (cercle de 24 px sense superposició), equivalent, en línia, agent d'usuari o essencial.