This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung →
Barrierefreiheit
Zašto fiksna zaglavlje nikad ne smije sakriti fokus tipkovnice?
Fiksni zaglavlje, upozorenje o kolačićima ili ljepljiva podnožja ne smije nikada potpuno zakriviti element koji je upravo u fokusu, jer se korisnici tipkovnice inače više neće znati gdje se nalaze. Kriterij 2.4.11 novi je sa WCAG 2.2: Pomicanjem fokusa kroz stranicu, aktivni element mora ostati najmanje djelomično vidljiv — čak i ako dijelovi stranice lebde preko sadržaja tijekom pomicanja.
Kako ljepljive trake proždiru fokus
Mnoga web-mjesta pričvršćuju elemente na rub ekrana: traku izbornika gore, upozorenje o kolačićima dolje, između njega možda banner biltena. Ti slojevi lebde preko sadržaja. Kada se fokus tipkovnice kreće kroz stranicu, aktivni element može ležati točno iza takve trake — okvir fokusa je tu, ali ga nitko ne vidi. Za korisnike tipkovnice čini se da je fokus nestao: Tabulator dalje i ne znaju koja gumba će aktivna tipka pritisnuti. Posebno varalive su visoke upozorenja o kolačićima na donjem kraju, iza kojih cijelim redama obrazca mogu nestati tijekom tabuliranja.
Kako služba za provjeru mjeri zakrivanje fokusa
Tijekom stvarnog prolaza tipkovnicom, služba za provjeru provjerava na svakom zaustavljanju fokusa nekoliko točaka aktivnog elementa: Ako na svim tim točkama leži neprozirna, fiksna ili ljepljiva površina iznad elementa, smatra se potpuno zakrivenim — kriterij je prekršen, te izvješće imenuje element s dokaznom fotografijom. Mjerenje je namjerno oprezno: elementi koji su sami dio fiksne trake se nikad ne smatraju skrivenim iza njega, i prozirna preklapanja se ne računaju kao zakrivanje. Ako element ostane barem djelomično vidljiv na svim zaustavljanjima, smatra se kriterij ispunjen.
Beispiele
Fokus hinter der klebenden Kopfzeile
header { position: sticky; top: 0; height: 80px; }
/* Tab scrollt das Element unter den Header */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.
- Tabulator kroz svoju stranicu i promatrajte donjem rubu ekrana — fokus nespisuje iza upozorenja o kolačićima?
- Držite fiksne trake što uže moguće, posebno na malim ekranima.
- Zamolite svoju agenciju da planira udaljenost pomicanja pri fokusiranju kako bi aktivni element nikad ne padao ispod fiksnih traka.
- Testirajte s vidljivim upozorenjem o kolačićima — upravo u ovom stanju novi posjetitelji doživljavaju vašu stranicu.