Questa traduzione non è ancora stata rivista dalla redazione. Fa fede la versione tedesca. Deutsche Fassung
Accessibilità
Che aspetto ha una cornice di messa a fuoco che si distingue davvero?
Il frame di messa a fuoco mostra gli utenti della tastiera dove sono. Livello AA (2.4.7) richiede solo che sia visibile; Un telaio sottile e pallido soddisfa questo. Livello AAA criterio 2.4.13 specifica le misure: Il telaio focale racchiude l'elemento con una linea di almeno 2 pixel CSS di spessore, e l'area che cambia a fuoco ha un contrasto di almeno 3:1 tra stati focalizzati e non focalizzati.
Cosa richiede il criterio
Due misure, entrambe misurabili. In primo luogo, l'area: la cornice focale è almeno grande come un profilo spesso 2 pixel intorno all'elemento; Una cornice da sola o da 1 pixel non è sufficiente. In secondo luogo, il contrasto: i pixel che cambiano a fuoco differiscono dallo stato senza fuoco di almeno 3:1. Una cornice blu scuro su un pulsante blu scuro passa attraverso, una cornice bianca con orlo scuro su ogni sfondo esiste.
Un quadro che funziona su qualsiasi sfondo
Poiché i pulsanti possono essere leggeri e scuri, una messa a fuoco a due colori ha successo: un profilo di 2 pixel in un colore audace con distanza di 2 pixel all'elemento (outline-offset) e un'ombra aggiuntiva nel controcolore. Così, il contrasto viene mantenuto su superfici chiare e scure. Il focus predefinito del browser è spesso troppo sottile o viene rimosso dal foglio di stile con il profilo: nessuno; Questo divieto è la ragione più comune per la messa a fuoco invisibile.
Questo è il modo in cui ci occupiamo
La misura concentra ogni elemento di controllo, confronta i pixel prima e dopo la messa a fuoco, e misura lo spessore e il contrasto del cambiamento. Questo rende il criterio completamente testabile automaticamente; il livello AA test (focus visibile) fornisce gli stessi dati. Il criterio appartiene alla categoria AAA nella conoscenza; nella relazione, lo spessore e il contrasto per riferimento.
Esempi
Telaio focale sottile
:focus-visible { outline: 1px dotted #cccccc; }:focus-visible {
outline: 3px solid #1a5fb4;
outline-offset: 2px;
box-shadow: 0 0 0 5px #ffffff;
}Almeno 2 pixel delineano, e i pixel modificati differiscono dallo stato sfocato di 3:1. L'ombra bianca mantiene il contrasto sulle superfici scure.
- Rimuovere ogni profilo: nessuno dal foglio di stile, che non definisce immediatamente il proprio focus.
- Definire un focus globale con:focus-visible: profilo di 3 pixel, contorno di 2 pixel, in un colore 3:1 sullo sfondo.
- Aggiungere un'ombra nel controcolore in modo che il telaio rimanga visibile su superfici chiare e scure.
- Passare attraverso la pagina con il tasto scheda e controllare ogni stato: menu, pulsanti, campi, link nel testo.
