Skip to content

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

Barrierefreiheit

Cos'è una trappola da tastiera su un sito web?

Una trappola da tastiera è un punto su un sito web in cui il cursore della tastiera rimane bloccato: se qualcuno vi entra con il tasto Tab, non può uscire da solo usando solo la tastiera. Per le persone senza mouse il sito termina a questo punto, non è possibile leggere oltre, ordinare o inviare il modulo. I trigger comuni sono selettori di date, finestre di chat, video incorporati e gallerie di immagini. Il criterio WCAG 2.1.2 vieta tali trappole.

Come nasce una trappola da tastiera

La maggior parte delle trappole da tastiera non viene costruita intenzionalmente. Nascono da componenti prefabbricate di terze parti: un selettore di date intrapola lo stato attivo affinché i giorni del calendario siano raggiungibili con i tasti freccia, ma dimentica l'uscita. Una finestra di chat mantiene il cursore nel suo campo di input. Una finestra di dialogo autodefinita senza pulsante Chiudi lascia lo stato attivo circolare tra i suoi due pulsanti. Con il mouse questo non si nota mai, perché gli utenti del mouse semplicemente cliccano altrove. Ecco perché le trappole da tastiera spesso rimangono nascoste per mesi mentre gli utenti della tastiera abbandonano il sito nello stesso punto.

Come il servizio di verifica misura la trappola da tastiera

Il servizio di verifica preme effettivamente il tasto Tab sulla tua pagina e registra ogni fermata con posizione e elemento. Se il cursore circola tra gli stessi pochi elementi senza raggiungere la fine del documento, lo valuta come trappola da tastiera. Il rapporto nomina gli elementi coinvolti e allega una schermata di prova. Se lo stato attivo circola all'interno di un frame incorporato di un fornitore esterno, il rapporto nota il caso per verifica manuale: non si può decidere automaticamente con certezza se c'è un'uscita. Se la misurazione raggiunge la fine del documento senza circolare, il criterio è considerato soddisfatto.

Beispiele

Dialog ohne Ausgang

Verstoß
<div role="dialog" aria-modal="true">
  <p>Newsletter?</p>
  <input type="email">
  <!-- kein Schließen-Knopf, Escape ohne Wirkung -->
</div>
Erfüllt
<dialog id="nl">
  <p>Newsletter?</p>
  <input type="email">
  <button type="button" onclick="nl.close()">Schließen</button>
</dialog>
<!-- dialog schließt mit Escape von selbst -->

Aus jedem Bereich muss die Tastatur wieder herauskommen: mit Tab, Escape oder einem beschriebenen Weg.

  • Scorri completamente attraverso la tua home page fino al piè di pagina: se rimani bloccato da qualche parte, hai trovato la trappola.
  • Verifica singolarmente ogni nuovo componente esterno incorporato: selettore di date, finestra di chat, carosello, lettore video.
  • Chiedi alla tua agenzia di fornire a ogni finestra di dialogo un modo per chiuderla accessibile da tastiera, almeno il tasto Esc.
  • Testa di nuovo dopo ogni aggiornamento dei componenti incorporati: una nuova versione potrebbe introdurre una trappola.

Deutsche Fassung dieser Seite