Skip to content

Questa traduzione non è ancora stata rivista dalla redazione. Fa fede la versione tedesca. Deutsche Fassung →

Barrierefreiheit

Perché un sito Web deve essere utilizzabile senza mouse?

Un sito web deve essere utilizzabile senza mouse, perché molte persone usano esclusivamente la tastiera: persone non vedenti con lettore di schermo, persone con tremore o paralisi e utenti di tastiere speciali. Se il tasto Tab non raggiunge una voce di menu o un pulsante, questa funzione semplicemente non esiste per tutte queste persone — come se non l'avesse mai costruita. Il criterio WCAG 2.1.1 richiede quindi l'accessibilità completa da tastiera.

Navigazione da tastiera nel quotidiano: Tab, Invio e tasti freccia

La navigazione senza mouse segue uno schema fisso. Il tasto Tab sposta un indicatore visibile da elemento a elemento: dal logo al menu, dal menu al campo di ricerca, quindi ai link e ai pulsanti. Il tasto Invio apre l'elemento evidenziato, i tasti freccia controllano i menu e gli elenchi a discesa. Un esempio: chi compila il Suo modulo di contatto salta con Tab da campo a campo e invia alla fine premendo Invio. Questo schema funziona solo se ogni elemento di controllo è tecnicamente definito come link, pulsante o campo modulo. Un paragrafo di testo cliccabile che uno script trasforma in pulsante ha lo stesso aspetto con il mouse — per la tastiera non esiste.

Così il servizio di verifica controlla l'accessibilità da tastiera

Il servizio di verifica preme effettivamente il tasto Tab sulla Sua pagina, fermata dopo fermata, fino alla fine del documento. Inoltre cerca nel codice sorgente elementi di controllo che rispondono solo al clic del mouse: elementi con istruzioni di clic che sono irraggiungibili da tastiera. Se trova tali elementi, il criterio è considerato violato e il rapporto nomina il primo elemento interessato insieme a una prova con screenshot. Se il tasto Tab non raggiunge nemmeno una fermata nonostante ci siano elementi di controllo, è anch'esso una violazione. Se la misurazione rimane indecisa, il rapporto lo esponeva apertamente come un punto di verifica manuale — una verifica vuota è per noi un errore, mai un'autorizzazione.

Beispiele

Klick-Handler auf einem div

Verstoß
<div class="knopf" onclick="warenkorb()">In den Warenkorb</div>
Erfüllt
<button type="button" onclick="warenkorb()">In den Warenkorb</button>

Ein div erreicht die Tabulatortaste nicht und reagiert nicht auf Enter oder Leertaste. Ein button kann beides von selbst.

Menü öffnet nur beim Überfahren

Verstoß
.menue li:hover > ul { display: block; }
Erfüllt
.menue li:hover > ul,
.menue li:focus-within > ul { display: block; }

focus-within öffnet das Untermenü auch, wenn der Fokus per Tastatur auf einem Eintrag liegt.

  • Metta il mouse da parte e azionare la Sua pagina iniziale per cinque minuti solo con tasto Tab, tasto Invio e tasti freccia.
  • Controllare particolarmente menu, campo di ricerca e carrello — è lì che si nascondono la maggior parte dei punti che rispondono solo al clic del mouse.
  • Chieda alla Sua agenzia di utilizzare veri elementi di controllo per ogni elemento cliccabile: link, pulsante o campo modulo invece di testo cliccabile.
  • Ripeta il test da tastiera dopo ogni grande riorganizzazione — un nuovo script di menu può rimuovere l'accessibilità da tastiera inosservato.

Deutsche Fassung dieser Seite