This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Prístupnosť
Prečo by sa sústredený prvok nikdy nemal skrývať?
Každý, kto prechádza cez stránku s klávesnicou, musí vidieť, kde je zameranie. Lepiace hlavičky, banery cookie a okná chatu nad obsahom; Zaostrené pevniny pod a je neviditeľný. Úroveň AA (2.4.11, nová vo WCAG 2.2) vyžaduje, aby zacielený prvok zostal aspoň čiastočne viditeľný. Kritérium AAA úrovne 2.4.12 vyžaduje: úplne viditeľné, žiadne zakryté pixely.
Čo vyžaduje kritérium
Keď položka dostane sústredenie klávesnice, žiadna časť je za iným obsahom autor vygeneroval: žiadna lepkavá hlavička alebo pätka, žiadny banner cookie, žiadne tlačidlo chatu, žiadne referenčné okno. Pri zmene zamerania sa prehliadač posunie len dovtedy, kým prvok vstúpi do viditeľnej oblasti; Nevie nič o tých, ktorí sú nad tým. Samotná strana preto musí zabezpečiť, aby bola plocha pod lepiacim pásom počas rolovania čistá.
Vykonávanie
Vlastnosť CSS rolling-padding na zvitkovom kontajneri rezervuje hore a dole toľko miesta, ako sú lepiace pásy sú vysoké; prehliadač potom prezerá sústredené prvky pod barom. Okná ležiace na boku zachytávajú zaostrenie (zaostrenie zostáva v okne) alebo zatvárajú, keď sa zaostrenie dostane na stranu. Tlačidlo chatu v rohu zostáva malé alebo sa pohybuje stranou, keď sa zameriava na prvok nižšie.
Takto sa s tým vysporiadame
Meranie prechádza cez stránku s kľúčom karty, meria viditeľnú časť pre každý zaostrený prvok a porovnáva sa s lepiacimi prvkami; Čiastočne viditeľné pre úroveň AA, plne viditeľné pre AAA. Rovnaké meranie poskytuje obe hodnoty. Kritérium patrí do kategórie AAA v poznatkoch; správa obsahuje skrytý podiel na referenčnom bode.
Príklady
Zameranie poľa polovica pod tlačidlom chatu
.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; }Na úrovni AA musí byť časť sústredeného prvku zakrytá a žiadny pixel na AAA.
- Nastavte rolovanie-padding hore a dole do výšky vaše lepiace slabiny.
- Umožniť bannerom cookie a referenčným oknám zachytiť zaostrenie, kým nie sú zatvorené.
- Prejdite každú šablónu s kľúčom karty a pozorujte fokus; Nikde nesmie zmiznúť.
- Držte plávajúce tlačidlá (chat, hore) malé a vo vzdialenosti od okraja.
