Focus visible i no ocult (2.4.7, 2.4.11), mida de l'objectiu (2.5.8) i gestos (2.5.1, 2.5.7)

Qui navega amb el teclat necessita saber on és; qui fa servir el dit, un punter de cap o la mà amb tremolor necessita poder encertar; qui no pot fer gestos complexos necessita una alternativa. Aquestes tres necessitats es tradueixen en decisions de disseny molt concretes que WCAG 2.2 regula amb criteris precisos, diversos dels quals són nous. Aquesta lliçó els recorre amb mesures, exemples i els errors que més es repeteixen.

El focus s'ha de veure

2.4.7 Focus visible (AA)

Tota interfície operable amb el teclat ha de tenir una manera de funcionar en què l'indicador de focus sigui visible. És el criteri que s'incompleix cada vegada que algú escriu outline: none «perquè el requadre blau és lleig». Les persones que naveguen amb la tecla Tab (usuaris de teclat, de polsadors, de control per veu, persones amb baixa visió que no fan servir el ratolí) perden literalment la posició a la pàgina.

El disseny ha de definir un estat de focus per a cada component interactiu, diferent del hover, dins del sistema de disseny. Per cobrir també 2.4.13 Aparença del focus (AAA, útil com a objectiu): contorn d'almenys 2 píxels CSS amb un contrast de 3:1 entre l'estat amb focus i sense focus. Un anell doble (blanc interior, blau fosc exterior) funciona sobre qualsevol fons.

/* Incorrecte: elimina el focus per a tothom */
:focus { outline: none; }

/* Correcte: focus visible només per al teclat, amb anell doble */
:focus-visible {
  outline: 3px solid #0B3D91;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFFFFF;
}

2.4.11 Focus no ocult (mínim) (AA)

Nou a WCAG 2.2. Quan un component rep el focus del teclat, no pot quedar completament ocult darrere de contingut creat per l'autor: capçaleres fixes, peus enganxosos, bàners de galetes, taulers de xat. És un problema molt habitual: en tabular, el focus arriba a un enllaç que és just a sota de la capçalera fixa i la persona no veu res. La versió AAA (2.4.12) exigeix que no quedi ocult ni parcialment. En disseny: calcula l'alçada dels elements fixos i assegura't que el desplaçament al focus els té en compte (scroll-padding-top en CSS), i que els taulers oberts per l'usuari no tapen el focus.

Objectius que es puguin prémer

2.5.8 Mida de l'objectiu (mínim) (AA)

Nou a WCAG 2.2. Els objectius de punter (botons, enllaços, controls) han de fer almenys 24 per 24 píxels CSS, excepte en cinc casos:

• Espaiat: els objectius més petits són vàlids si, traçant un cercle de 24 px de diàmetre centrat en cadascun, el cercle no se superposa amb altres objectius ni amb els seus cercles. És a dir, els botons petits però ben separats compleixen.
• Equivalent: hi ha un altre control a la mateixa pàgina que fa el mateix i que sí que compleix.
• En línia: l'objectiu és dins d'una frase o d'un bloc de text (els enllaços d'un paràgraf).
• Control de l'agent d'usuari: la mida la determina el navegador i no s'ha modificat.
• Essencial: la presentació concreta és essencial o legalment obligatòria (punts en un mapa, per exemple).

El criteri 2.5.5 Mida de l'objectiu (millorat), de nivell AAA, demana 44 per 44 píxels. Un bon sistema de disseny fa servir 44 px per als controls principals i mai no baixa de 24 px, amb almenys 8 px de separació.

Gestos i arrossegaments amb alternativa

2.5.1 Gestos del punter (A)

Tota funció que faci servir gestos multipunt (pinçar per ampliar, dos dits) o basats en una trajectòria (lliscar, dibuixar) s'ha de poder fer amb un sol punter i sense trajectòria (pulsacions simples), tret que el gest sigui essencial. Un carrusel que només es mou lliscant necessita fletxes; un mapa que només s'amplia pinçant necessita botons «+» i «−»; una galeria que es tanca lliscant cap avall necessita un botó de tancar.

2.5.7 Moviments d'arrossegament (AA)

Nou a WCAG 2.2. Tota funció que requereixi arrossegar (ordenar una llista, moure un control lliscant, deixar anar un fitxer, moure una targeta en un tauler) s'ha de poder fer amb un sol punter sense arrossegar, tret que sigui essencial. Alternatives habituals: botons «puja/baixa», camp numèric al costat del control lliscant, botó «Selecciona un fitxer», menú «Mou a…». Arrossegar és molt difícil amb tremolor, dolor articular, control per veu o polsadors.

Altres criteris del punter

• 2.5.2 Cancel·lació del punter (A): l'acció s'executa en deixar anar, no en prémer, per poder fer-se enrere arrossegant el dit fora. És el comportament per defecte dels botons; no el canviïs.
• 2.5.3 Etiqueta en el nom (A): el nom accessible d'un control inclou el text visible, perquè qui fa servir control per veu pugui dir «prem Envia». Un botó que mostra «Envia» però té aria-label="Tramet el formulari" incompleix.
• 2.5.4 Activació per moviment (A): si alguna cosa s'activa agitant el dispositiu, hi ha d'haver un control convencional.

Resum

• 2.4.7 Focus visible (AA): cada component necessita un estat de focus dissenyat; mai outline: none sense alternativa. Objectiu: contorn de 2 px i contrast 3:1 (2.4.13, AAA).
• 2.4.11 Focus no ocult (mínim) (AA, nou): l'element amb focus no pot quedar totalment tapat per capçaleres fixes, bàners o taulers.
• 2.5.8 Mida de l'objectiu (mínim) (AA, nou): 24 per 24 px CSS, amb excepcions d'espaiat, equivalent, en línia, agent d'usuari i essencial; 44 px és el nivell AAA.
• 2.5.1 Gestos del punter (A) i 2.5.7 Moviments d'arrossegament (AA, nou): alternativa de pulsació simple per als gestos complexos i els arrossegaments.
• 2.5.2, 2.5.3 i 2.5.4: acció en deixar anar, nom accessible que inclou el text visible i alternativa a l'activació per moviment.