Ordre del focus (2.4.3), focus visible (2.4.7), focus no ocult (2.4.11) i tabindex

Que tot sigui operable amb teclat no n'hi ha prou: a més, el focus s'ha de moure en un ordre que tingui sentit i la persona ha de veure en tot moment on és. Imagina que fas servir un ordinador amb un punter invisible que salta per la pantalla sense lògica. Això és un web amb un mal ordre de focus i sense indicador visible. Aquesta lliçó cobreix tres criteris i una eina: 2.4.3 Ordre del focus (A), 2.4.7 Focus visible (AA), 2.4.11 Focus no ocult (mínim) (AA, nou a les WCAG 2.2) i l'atribut tabindex.

2.4.3 Ordre del focus

El criteri exigeix que, quan l'ordre de navegació afecta el significat o l'operació, els components rebin el focus en un ordre que preservi tots dos. En general això vol dir que l'ordre del focus ha de coincidir amb l'ordre visual de lectura: d'esquerra a dreta i de dalt a baix en la nostra cultura, seguint els blocs del disseny. Com que el focus segueix l'ordre del DOM, la regla pràctica és la mateixa que vam veure al curs anterior: ordena el codi tal com es llegeix la pàgina.

L'ordre lògic no sempre és el visual estricte: en un formulari de dues columnes coherents, recórrer primer una columna sencera i després l'altra és correcte. El que no és correcte és que el focus vagi a la capçalera, després al peu i després al contingut perquè algú ha reordenat amb CSS, ni que en obrir un desplegable el focus acabi al final de la pàgina perquè el panell s'ha inserit allà al DOM.

<input id="nombre" tabindex="1">
<input id="email" tabindex="3">
<input id="telefono" tabindex="2">
<button tabindex="4">Envia</button>

tabindex: només 0 i -1

L'atribut tabindex té tres usos i només dos són recomanables:

• tabindex="0": inclou l'element en l'ordre natural de tabulació, en la posició que li correspon pel DOM. Es fa servir per fer assolible un element no natiu (un control personalitzat, un contenidor amb desplaçament).
• tabindex="-1": l'element pot rebre el focus per programa (elemento.focus()) o amb clic, però no amb Tab. Es fa servir per a destinacions d'enllaços de salt, contenidors de missatges d'error, encapçalaments als quals es mou el focus després d'un canvi de vista, i per a les opcions d'un component compost que es recorren amb fletxes (patró roving tabindex), que veuràs a fons a la lliçó sobre components compostos.
• tabindex="1" o més gran: altera l'ordre global. No el facis servir.

A més, no posis tabindex="0" en elements no interactius (paràgrafs, encapçalaments, targetes) «perquè el lector els llegeixi»: el lector ja ho llegeix tot; només hi afegeixes parades sense funció que confonen qui navega amb teclat.

2.4.7 Focus visible

El criteri exigeix que hi hagi un mode d'operació amb teclat en què l'indicador de focus sigui visible. Tots els navegadors el dibuixen per defecte (l'anell blau o el contorn puntejat), així que l'error gairebé sempre és provocat: la famosa regla outline: none o outline: 0 aplicada a tot per «netejar» el disseny. Si la treus sense substituir-la per un altre indicador, la navegació per teclat queda a cegues.

*:focus { outline: none; }
a, button { outline: 0; }

:focus-visible {
  outline: 3px solid #1a4fd6;
  outline-offset: 2px;
}
.boton-primario:focus-visible {
  outline: 3px solid #ffffff;
  box-shadow: 0 0 0 6px #1a4fd6;
}

Quant s'ha de veure l'indicador? Les WCAG 2.2 inclouen el criteri AAA 2.4.13 Aparença del focus amb requisits quantitatius: una àrea almenys equivalent a un perímetre de 2 píxels CSS al voltant del component i un contrast de 3:1 entre l'estat amb focus i sense focus. No és obligatori en AA, però és la referència que convé seguir: un contorn de 2-3 píxels, un color amb contrast de 3:1 respecte al fons (l'1.4.11 Contrast no textual sí que s'aplica a l'indicador) i, si el component pot estar sobre fons variats, un doble anell (clar i fosc) com a l'exemple.

2.4.11 Focus no ocult (mínim)

Aquest criteri de les WCAG 2.2 cobreix un problema que el 2.4.7 no cobria: l'indicador existeix, però un altre contingut el tapa. Capçaleres fixes (sticky), peus amb l'avís de galetes, barres de xat flotants i panells laterals poden amagar completament l'element enfocat, de manera que la persona prem Tab i no veu res. El criteri exigeix que, quan un component rep el focus, no quedi completament ocult per contingut creat per l'autor. La versió AAA (2.4.12) exigeix que no quedi ocult ni tan sols en part.

Solucions pràctiques:

• Fes servir la propietat CSS scroll-padding-top a l'element amb desplaçament (normalment html) amb un valor igual a l'alçada de la capçalera fixa, perquè el navegador desplaci l'element enfocat per sota.
• Fes que els avisos de galetes i els xats flotants no se superposin al contingut, o que rebin el focus els primers i es puguin tancar.
• Comprova el comportament dels panells que s'obren sobre el contingut: el que queda a sota hauria de ser inert o desplaçar-se.

html {
  scroll-padding-top: 80px; /* alçada de la capçalera fixa */
}

Com comprovar-ho

• Recorre la pàgina amb Tab des de la barra d'adreces i anota en veu alta on és el focus; si en algun moment no ho saps, falla el 2.4.7 o el 2.4.11.
• Observa si l'ordre segueix el disseny; quan s'obri alguna cosa, el focus ha d'anar al que s'ha obert.
• Busca al CSS outline: none, outline: 0 i, a l'HTML, tabindex=" seguit d'un número positiu.
• Amb una capçalera fixa, tabula per una llista llarga d'enllaços i comprova que cap no s'enfoca amagat a sota.

Resum

• El focus segueix l'ordre del DOM; ordena el codi com es llegeix i no facis servir tabindex positius (2.4.3).
• tabindex="0" fa assolible un element; tabindex="-1" el fa enfocable només per programa.
• No eliminis mai l'outline sense substituir-lo; fes servir :focus-visible amb un contorn de 2-3 píxels i contrast de 3:1 (2.4.7, 1.4.11).
• Les capçaleres i els peus fixos no han de tapar l'element enfocat; scroll-padding-top ho evita (2.4.11).
• Tabular per tota la pàgina sense perdre de vista el focus és la prova definitiva.