This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Přístupnost
Proč by se soustředěný prvek nikdy neměl skrývat?
Každý, kdo prochází stránku s klávesnicí, musí vidět, kde je ohnisko. Adhezivní záhlaví tyčí, bannery cookie a okna chatu nad obsahem; Soustředění je pod ním a je neviditelné. Úroveň AA (2.4.11, nová ve WCAG 2.2) vyžaduje, aby cílený prvek zůstal alespoň částečně viditelný. Úroveň AAA kritérium 2.4.12 vyžaduje: plně viditelný, žádný pixel zastřený.
Co kritérium vyžaduje
Když prvek obdrží zaostření klávesnice, žádná jeho část není za žádným jiným obsahem, který autor vytvořil: žádná lepkavá záhlaví nebo footer, žádný banner cookie, žádné tlačítko chatu, žádné referenční okno. Při změně zaměření prohlížeč posune pouze tak daleko, aby prvek vstoupil do viditelné oblasti; On o těch, kdož nad ním stojí, nic neví. Boční část proto musí sama zajistit, aby plocha pod lepícím páskem byla během rolování udržována v čistotě.
Provádění
Vlastnost CSS scroll- vycpávky na sklápěcím kontejneru si vyhrazuje nahoru a dolů tolik prostoru, kolik jsou lepicí pásky vysoké; prohlížeč pak posune cílené prvky pod barem. Okna ležící nad stranou zachytí zaostření (ostření zůstává v okně) nebo zavřou, když zaostření vstoupí do strany. Tlačítko chatu v rohu zůstává malé nebo se pohybuje stranou při zaměření na prvek níže.
Takhle se s tím vypořádáváme
Měření prochází stránkou s klávesnicí karty, měří viditelnou část pro každý cílený prvek a porovnává s adhezivními prvky; Částečně viditelné pro úroveň AA, plně viditelné pro AAA. Stejné měření poskytuje obě hodnoty. Kritérium patří do kategorie AAA ve znalosti; zpráva obsahuje skrytou akcii za referenční bod.
Příklady
Zaostřené pole na polovinu pod tlačítkem 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; }Na úrovni AA, část zaostřeného prvku musí být zakryta, a žádný pixel na AAA.
- Nastavte scroll- padding horní a spodní na výšku vašeho lepicího třísla.
- Povolit bannery cookie a referenční okna zachytit zaostření, dokud jsou uzavřeny.
- Projděte každou šablonu klíčem k kartě a sledujte rámec zaostření; Nikde nesmí zmizet.
- Udržujte plovoucí tlačítka (chat, up) malé a ve vzdálenosti od okraje.
