Questa traduzione non è ancora stata rivista dalla redazione. Fa fede la versione tedesca. Deutsche Fassung →
Barrierefreiheit
Perché un elemento concentrato non dovrebbe mai essere nascosto?
Chi passa attraverso una pagina con la tastiera deve vedere dove si concentra. barre di intestazione adesivo, banner cookie e finestre di chat sul contenuto; Il fuoco atterra sotto ed è invisibile. Livello AA (2.4.11, nuovo in WCAG 2.2) richiede che l'elemento concentrato rimanga almeno parzialmente visibile. Livello AAA criterio 2.4.12 richiede: completamente visibile, nessun pixel oscurato.
Cosa richiede il criterio
Quando un elemento riceve la messa a fuoco della tastiera, nessuna parte di esso è dietro qualsiasi altro contenuto che l'autore ha generato: nessun intestazione appiccicosa o piè di pagina, nessun banner cookie, nessun pulsante di chat, nessuna finestra di riferimento. Quando si cambia la messa a fuoco, il browser scorre solo fino a che l'elemento entra nell'area visibile; Non sa niente di coloro che sono al di sopra di esso. Il lato deve quindi assicurarsi che l'area sotto una striscia adesiva sia tenuta chiara durante lo scorrimento.
Attuazione
Lo scorrimento della proprietà CSS sul contenitore di scorrimento si riserva su e giù tanto spazio quanto le strisce adesive sono alte; il browser quindi scorre fuori elementi concentrati sotto la barra. Windows che si trova sul lato catturare l'attenzione (la messa a fuoco rimane nella finestra) o chiudere quando la messa a fuoco entra nel lato. Un pulsante di chat nell'angolo rimane piccolo o si sposta da parte quando si concentra su un elemento sottostante.
Questo è il modo in cui ci occupiamo
La misurazione passa attraverso la pagina con la chiave della scheda, misura la porzione visibile per ogni elemento focalizzato e confronta con gli elementi adesivi; Parzialmente visibile per livello AA, completamente visibile per AAA. La stessa misura fornisce entrambi i valori. Il criterio appartiene alla categoria AAA nella conoscenza; il rapporto contiene la parte nascosta per punto di riferimento.
Esempi
Campo focalizzato metà sotto il pulsante chat
.chat { position: fixed; right: 0; bottom: 0; width: 320px; height: 120px; }
/* das letzte Formularfeld liegt zur Hälfte darunter */.chat { position: fixed; right: 16px; bottom: 16px; width: 56px; height: 56px; }
html { scroll-padding-bottom: 88px; }A livello AA, parte dell'elemento concentrato deve essere oscurato, e nessun pixel su AAA.
- Impostare la parte superiore e inferiore a scorrimento per l'altezza dell'inguine adesivo.
- Consentire banner cookie e finestre di riferimento per catturare l'attenzione fino a quando non sono chiusi.
- Passare attraverso ogni modello con il tasto scheda e osservare la cornice di messa a fuoco; Non deve sparire da nessuna parte.
- Tenere i pulsanti galleggianti (chat, up) piccoli e a una distanza dal bordo.
