Tot operable amb teclat (2.1.1), sense paranys (2.1.2) i dreceres (2.1.4)

El teclat és la interfície universal. Les persones cegues no fan servir ratolí perquè no veuen el punter; moltes persones amb discapacitat motriu fan servir només el teclat, un commutador que emula pulsacions o un programa de control per veu que, per sota, envia esdeveniments de teclat; i bastants usuaris experts simplement prefereixen no treure les mans del teclat. Per això la pauta 2.1 de les WCAG es titula «Accessible per teclat» i el seu primer criteri és de nivell A: si alguna cosa no es pot fer amb teclat, no es pot fer.

2.1.1 Teclat

El criteri exigeix que tota la funcionalitat del contingut sigui operable mitjançant una interfície de teclat, sense requerir temps específics per a cada pulsació. L'única excepció són les funcions que depenen intrínsecament del traçat del moviment, com el dibuix a mà alçada, i tot i així la resta de l'aplicació (desar, esborrar, canviar de color) ha de funcionar amb teclat.

A la pràctica, un element és operable amb teclat quan compleix tres condicions:

1. És assolible: rep el focus en prémer Tab (o amb les fletxes dins d'un component compost).
2. És activable: respon a Retorn i, en el cas dels botons, també a Espai.
3. És completable: totes les seves funcions internes (obrir, tancar, triar una opció, moure un control lliscant) tenen una tecla assignada.

Els elements natius (a amb href, button, input, select, textarea, summary) compleixen les tres per defecte. Els problemes apareixen quan es fan servir div o span amb esdeveniments de ratolí, quan una funcionalitat només respon a mouseover o hover, o quan un component personalitzat només implementa el clic.

<div class="tarjeta" onclick="toggle(this)">
  <span class="titulo">Requisits</span>
  <div class="detalle" hidden>…</div>
</div>

<div class="tarjeta">
  <h3><button type="button" aria-expanded="false" aria-controls="req-detalle">Requisits</button></h3>
  <div id="req-detalle" hidden>…</div>
</div>

Quan no hi ha més remei que fer interactiu un element genèric, cal reconstruir tot el que el navegador donaria de franc: tabindex="0" perquè sigui assolible, un rol adequat, un gestor de keydown que respongui a Retorn i Espai, i evitar el desplaçament de pàgina que provoca Espai per defecte:

elemento.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault();
    elemento.click();
  }
});

Un detall que s'oblida: les funcions que apareixen en passar el ratolí (hover) també han d'aparèixer amb el focus. Un menú desplegable que s'obre amb :hover s'ha d'obrir també amb :focus-within o amb un botó; un botó «Elimina» que només es mostra en passar el ratolí per una fila ha de ser assolible amb Tab i fer-se visible quan rep el focus.

2.1.2 Sense paranys per al focus del teclat

Un parany de teclat es produeix quan el focus entra en un component i no en pot sortir amb les tecles habituals. La persona queda bloquejada i només pot tancar la pestanya. Els culpables típics són reproductors incrustats, widgets de tercers, editors de text enriquit que capturen Tab per inserir tabulacions, i finestres modals mal implementades que atrapen el focus però no ofereixen cap manera de tancar-se.

El criteri permet que el focus es mantingui dins d'un component (de fet, un diàleg modal ho ha de fer), però exigeix que se'n pugui sortir amb Tab, Maj+Tab, Escapada o una altra tecla estàndard i que, si la manera de sortir no és l'habitual, se n'informi. Un editor que fa servir Tab per tabular ha d'indicar «Prem Escapada i després Tab per sortir de l'editor».

campo.addEventListener('keydown', (e) => {
  if (e.key === 'Tab') {
    e.preventDefault(); // insereix un tabulador i bloqueja la sortida
    insertarTab();
  }
});

2.1.4 Dreceres de teclat

Afegit a les WCAG 2.1, aquest criteri de nivell A regula les dreceres formades per una sola tecla (lletres, números, signes de puntuació) sense modificadors. El problema: una persona que fa servir control per veu o que escriu amb dificultat pot dictar o prémer una lletra sense voler i disparar una acció. Un exemple típic: una persona que fa servir control per veu en un client de correu amb la drecera «R» per respondre i «E» per arxivar pot veure com el seu dictat arxiva i respon missatges a l'atzar.

Si la teva aplicació implementa dreceres d'una sola tecla, ha de complir almenys una d'aquestes condicions:

• Hi ha un mecanisme per desactivar-les.
• Hi ha un mecanisme per reassignar-les a una combinació amb modificador (Ctrl, Alt…).
• La drecera només és activa quan un component concret té el focus (per exemple, les fletxes dins d'un control lliscant o les lletres dins d'un llistat per saltar a un element).

Les dreceres amb modificador (Ctrl+S) no entren en aquest criteri, però convé no trepitjar les del navegador ni les del lector de pantalla. L'atribut accesskey d'HTML s'activa amb combinacions diferents a cada navegador i xoca sovint amb les de NVDA i JAWS; la seva utilitat real és escassa i la majoria de les guies recomanen no fer-lo servir. A la lliçó «Esdeveniments de teclat i dreceres pròpies» veuràs com implementar dreceres que compleixin aquest criteri sense xocar amb el navegador, el lector de pantalla ni el teclat espanyol.

Com comprovar-ho

• Desconnecta el ratolí (o no el toquis) i completa les tasques principals de la pàgina només amb Tab, Maj+Tab, Retorn, Espai, fletxes i Escapada.
• Busca al codi gestors onclick, onmouseover i onmouseenter en elements que no siguin interactius de manera nativa.
• Entra a cada component incrustat (vídeo, mapa, xat) i comprova que en pots sortir.
• Prem lletres soltes en diferents zones de la pàgina i observa si passa alguna cosa inesperada.

Resum

• 2.1.1: tota la funcionalitat ha de ser assolible, activable i completable amb teclat; l'única excepció és l'entrada que depèn del traçat.
• Fes servir elements natius; si no, reconstrueix el focus (tabindex="0"), el rol i la gestió de Retorn i Espai.
• El que apareix amb el ratolí ha d'aparèixer amb el focus.
• 2.1.2: el focus sempre ha de poder sortir d'un component amb tecles estàndard, o s'ha d'explicar com fer-ho.
• 2.1.4: les dreceres d'una sola tecla s'han de poder desactivar, reassignar o limitar al component amb focus.