Questa traduzione non è ancora stata rivista dalla redazione. Fa fede la versione tedesca. Deutsche Fassung →
Barrierefreiheit
Perché lo stato attivo da tastiera deve essere visibile su un sito web?
Lo stato attivo da tastiera deve essere visibile altrimenti gli utenti della tastiera controllano alla cieca: senza un contrassegno visibile, di solito una cornice colorata attorno all'elemento attivo, non è chiaro quale elemento è attualmente selezionato e cosa attiverebbe il tasto Invio nel momento successivo. Molti designer rimuovono questa cornice per motivi estetici e bloccano così gli utenti della tastiera. Il criterio WCAG 2.4.7 richiede un'indicazione dello stato attivo visibile.
La cornice dello stato attivo è il puntatore del mouse della tastiera
Gli utenti del mouse sanno sempre dove si trova il loro puntatore. Gli utenti della tastiera hanno la cornice dello stato attivo per questo: si sposta al prossimo elemento ad ogni pressione del tasto Tab e mostra cosa attiverebbe il tasto Invio. Se questa cornice scompare il controllo diventa un gioco di indovinelli come il controllo del mouse con un puntatore invisibile. La ragione più comune è una singola linea nelle specifiche di progettazione che disattiva il bordo standard del browser perché era considerato fastidioso. La soluzione giusta non è mai la rimozione ma la progettazione: una cornice nel tuo colore aziendale abbastanza forte da distinguersi su qualsiasi sfondo.
Come il servizio di verifica misura la visibilità dello stato attivo tramite il confronto dei pixel
Il servizio di verifica fotografa ogni elemento di controllo controllato due volte una volta senza e una volta con lo stato attivo. Quindi confronta entrambe le immagini pixel per pixel. Se lo stato attivo cambia meno dello 0,2% dei pixel nell'area dell'elemento il display dello stato attivo è praticamente invisibile il criterio è considerato violato e il rapporto nomina l'elemento interessato insieme alla schermata di prova. L'assenza di ambienti tranquilli ad esempio dovuti ad animazioni è riconosciuta da un confronto preliminare di due immagini senza stato attivo e tali elementi vengono esclusi dalla valutazione. Inoltre il rapporto nota se le specifiche di progettazione disabilitano i bordi dello stato attivo in blocco.
Beispiele
Fokusrahmen entfernt
*:focus { outline: none; }:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }outline: none macht die Tastaturbedienung blind. :focus-visible zeigt den Rahmen nur bei Tastatur, nicht beim Mausklick.
- Scorri la tua home page e osserva: ad ogni fermata è chiaramente visibile quale elemento è attualmente selezionato?
- Chiedi alla tua agenzia di rimuovere ogni regola che disattiva in blocco i bordi dello stato attivo.
- Fai definire una cornice dello stato attivo progettata nel tuo colore aziendale: abbastanza forte per sfondi chiari e scuri.
- Verifica lo stato attivo anche su immagini e aree colorate: una sottile cornice grigia scompare lì velocemente.