This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Přístupnost
Proč nesmí fixovaná horní lišta nikdy zcela zakrýt fokus klávesnice?
Fixovaná horní lišta, upozornění na cookies nebo přilepená spodní lišta nesmí nikdy zcela zakrýt právě zaostřený prvek, jinak uživatelé klávesnice už nevidí, kde se nacházejí. Kritérium 2.4.11 přibylo nově s WCAG 2.2: při pohybu fokusu po stránce musí aktivní prvek zůstat alespoň částečně viditelný — i když se části stránky při posouvání vznášejí nad obsahem.
Jak přilepené panely pohlcují fokus
Mnoho webových stránek fixuje prvky u okraje obrazovky: nabídkový panel nahoře, upozornění na cookies dole, mezi tím možná banner newsletteru. Tyto vrstvy se vznášejí nad obsahem. Pokud fokus klávesnice putuje po stránce, může aktivní prvek ležet přesně za takovým panelem — rámeček fokusu tam je, ale nikdo ho nevidí. Uživatelům klávesnice to připadá, jako by fokus zmizel: pokračují v tabování a nevědí, na jaké tlačítko trefí klávesou Enter. Zvlášť zákeřná jsou vysoká upozornění na cookies u dolního okraje, za kterými se při procházení tabulátorem mohou skrýt celé řádky formuláře.
Jak kontrolní služba měří zakrytí fokusu
Během skutečného průchodu klávesnicí kontrolní služba u každého zastavení fokusu ověří několik bodů aktivního prvku: pokud na všech těchto bodech leží neprůhledná, fixovaná nebo přilepená plocha nad prvkem, považuje se za zcela zakrytý — kritérium je porušeno a zpráva prvek pojmenuje spolu s doloženým snímkem obrazovky. Měření záměrně posuzuje opatrně: prvky, které jsou samy součástí fixovaného panelu, se nikdy nepovažují za skryté za ním a průhledné překryvy se za zakrytí nepočítají. Pokud prvek zůstává při všech zastaveních alespoň částečně viditelný, kritérium se počítá jako splněné.
Příklady
Zaostřit za hlavičku lepidla
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; }posuvné vycpávky udržují plochu pod hlavičkou čistou při změně zaostření. Kuchařské bannery zachycují zaměření, dokud nejsou zavřené.
- Protabujte svou stránku a sledujte dolní okraj obrazovky — mizí fokus dočasně za upozorněním na cookies?
- Udržujte fixované panely co nejužší, zejména na malých obrazovkách.
- Požádejte svou agenturu, aby při zaostřování počítala s odstupem posunu, aby aktivní prvek nikdy neskončil pod fixovanými panely.
- Testujte s viditelným upozorněním na cookies — přesně v tomto stavu vaši stránku zažívají první návštěvníci.
