Navegació per teclat

Qui necessita la navegació per teclat?

La navegació per teclat no és només per a persones amb discapacitat visual. La necessiten principalment usuaris amb discapacitat motriu —tremolors, pèrdua de mobilitat de les mans, dificultats per controlar el ratolí— que usen el teclat com a dispositiu principal. També la usen persones que utilitzen dispositius de control alternatiu (commutadors, barres de cap) que emeten pulsacions de teclat.

El criteri WCAG 2.1.1 exigeix que totes les funcionalitats disponibles amb ratolí siguin accessibles amb teclat, sense excepcions per a funcions que requereixin un trajecte de ratolí dependent del camí.

Les tecles bàsiques de navegació

• Tab: avança al següent element interactiu (link, botó, camp de formulari).
• Shift + Tab: retrocedeix a l’element anterior.
• Enter / Espai: activa l’element que té el focus (botó, link, checkbox).
• Fletxes: navega dins de components com menús desplegables, grups de ràdio, pestanyes.
• Escape: tanca elements com modals, menús desplegables, tooltips.

La prova bàsica de teclat

Pots fer una prova bàsica d’accessibilitat de teclat en menys de 5 minuts:

1. Obre el teu web en un navegador.
2. Tanca el ratolí o aparta’l.
3. Prem Tab i observa quin element rep el focus (ha de ser visible).
4. Continua prement Tab per tots els elements interactius.
5. Comprova que pots activar cada botó, link i camp de formulari.
6. Comprova que els menús desplegables s’obren i es poden navegar.
7. Comprova que els modals o popups es poden tancar amb Escape.

El focus visible

Un dels errors més habituals: el focus visible s’elimina per raons estètiques. Molts dissenyadors i developers eliminen l’outline del focus perquè «queda lleig». Però sense indicador de focus, l’usuari de teclat no sap on és a la pàgina.

WCAG 2.4.7 exigeix que el focus del teclat sigui sempre visible. Pots personalitzar l’estil del focus per integrar-lo amb el disseny, però no pots eliminar-lo:

/* MAL: elimina el focus */
*:focus { outline: none; }

/* BÉ: personalitza el focus */
*:focus {
outline: 2px solid #a9552d;
outline-offset: 2px;
}

Zones amb scroll inaccessibles

La regla axe-core scrollable-region-focusable detecta un problema específic: zones de la pàgina que tenen scroll (overflow: auto o scroll) però que no son accessibles per teclat perquè no reben focus.

Si una taula de dades, un llistat d’elements o una zona de contingut pot fer scroll amb el ratolí però no amb el teclat, és un error d’accessibilitat. La solució és afegir tabindex="0" a l’element per fer-lo focusable:

<div class="taula-scroll" tabindex="0">
<!-- contingut amb scroll horitzontal -->
</div>

Errors habituals en webs WordPress

Els errors de navegació per teclat més freqüents en webs WordPress son: menús desplegables que s’obren en hover però no en focus de teclat, modals que no retornen el focus al botó que els va obrir en tancar-se, sliders i carrusels sense controls de teclat, i mapes integrats (Google Maps) sense alternativa accessible.

Amb l’eina d’autoevaluació de webaccessible.cat pots detectar automàticament zones amb scroll no accessibles. Per als altres errors, la prova manual amb teclat és imprescindible.