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

Barrierefreiheit

Perché una barra di intestazione fissa non deve mai coprire completamente il focus della tastiera?

Una barra di intestazione fissa, un avviso sui cookie o un piè di pagina adesivo non devono mai coprire completamente l'elemento attualmente focalizzato, perché gli utenti da tastiera non vedrebbero più dove si trovano. Il criterio 2.4.11 è nuovo con WCAG 2.2: quando si sposta il focus attraverso la pagina, l'elemento attivo deve rimanere almeno parzialmente visibile — anche se parti della pagina si sovrappongono al contenuto durante lo scorrimento.

Come gli strati fissi inghiottono il focus

Molti siti Web fissano gli elementi al bordo dello schermo: la barra dei menu in alto, un avviso sui cookie in basso, forse un banner newsletter nel mezzo. Questi strati galleggiano sopra il contenuto. Quando il focus della tastiera si muove attraverso la pagina, l'elemento attivo può trovarsi proprio dietro uno di questi strati — il bordo del focus è lì, ma nessuno lo vede. Per gli utenti da tastiera, sembra che il focus sia scomparso: continuano a usare il tasto Tab e non sanno quale pulsante premeranno con Invio. Particolarmente insidiosi sono gli avvisi sui cookie alti nella parte inferiore, dietro i quali interi righe di moduli possono scomparire mentre si naviga con il tasto Tab.

Così il servizio di verifica misura la copertura del focus

Durante il vero passaggio da tastiera, il servizio di verifica controlla in ogni arresto del focus più punti dell'elemento attivo: se in tutti questi punti uno strato fisso opaco o adesivo si trova sopra l'elemento, è considerato completamente coperto — il criterio è violato e il rapporto nomina l'elemento con uno screenshot di prova. La misurazione è intenzionalmente cauta: gli elementi che fanno parte di uno strato fisso non sono mai considerati nascosti dietro ad esso, e le sovrapposizioni trasparenti non contano come copertura. Se l'elemento rimane almeno parzialmente visibile in tutti gli arresti, il criterio è considerato soddisfatto.

Beispiele

Fokus hinter der klebenden Kopfzeile

Verstoß

header { position: sticky; top: 0; height: 80px; }
/* Tab scrollt das Element unter den Header */

Erfüllt

header { position: sticky; top: 0; height: 80px; }
html { scroll-padding-top: 88px; }

scroll-padding hält beim Fokuswechsel den Bereich unter der Kopfzeile frei. Cookie-Banner fangen den Fokus ein, bis sie geschlossen sind.

Usi il tasto Tab attraverso la Sua pagina e osservi il bordo inferiore dello schermo — il focus scompare a volte dietro l'avviso sui cookie?
Mantenga le barre fisse il più strette possibile, specialmente su schermi piccoli.
Chieda alla Sua agenzia di pianificare una distanza di scorrimento durante il focus, in modo che l'elemento attivo non cada mai sotto le barre fisse.
Testi con un avviso sui cookie visibile — è esattamente in questo stato che i visitatori per la prima volta sperimentano il Suo sito.

Deutsche Fassung dieser Seite

FAQ

Cosa significa "Focus non coperto" in WCAG 2.2?

Il criterio 2.4.11 richiede: quando un elemento riceve il focus della tastiera, non può trovarsi completamente dietro altri contenuti — ad esempio dietro barre dei menu fisse, avvisi sui cookie o piè di pagina adesivi. Almeno una parte dell'elemento deve rimanere visibile. Altrimenti, gli utenti da tastiera perdono l'orientamento perché il loro unico indicatore di posizione diventa invisibile.

I menu fissi e gli avvisi sui cookie sono quindi vietati?

No. Le barre fisse rimangono consentite — possono solo non coprire completamente l'elemento attualmente focalizzato. In pratica, ciò significa: mantenere le barre strette e pianificare una distanza di scorrimento durante il focus, in modo che l'elemento attivo rimanga visibile sopra o sotto la barra. Entrambi sono risolvibili con poche righe nelle linee guida di stile.

Come si misura automaticamente la copertura del focus?

Il nostro servizio di verifica naviga attraverso la pagina e controlla in ogni arresto più punti dell'elemento attivo: se ovunque uno strato fisso opaco si trova sopra, l'elemento è considerato completamente coperto e il criterio violato — provato con uno screenshot. Le sovrapposizioni trasparenti e gli elementi che stanno stessi in una barra fissa non sono penalizzati di proposito.