This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Přístupnost
Proč musí být klávesový fokus na webové stránce viditelný?
Klávesový fokus musí být viditelný, jinak uživatelé klávesnice ovládají naslepo: Bez viditelného označení — většinou barevného rámečku kolem aktivního prvku — není poznat, který prvek je právě vybrán a co v příštím okamžiku spustí klávesa Enter. Mnoho tvůrců tento rámeček z estetických důvodů odstraní a tím uživatele klávesnice vyloučí. Kritérium WCAG 2.4.7 vyžaduje viditelné zobrazení fokusu.
Fokusový rámeček je ukazatel myši pro klávesnici
Uživatelé myši vidí kdykoli, kde stojí jejich ukazatel. Uživatelé klávesnice k tomu mají fokusový rámeček: putuje s každým stiskem klávesy Tab k dalšímu prvku a ukazuje, co by spustila klávesa Enter. Zmizí-li tento rámeček, ovládání se stane hádankou — jako ovládání myší s neviditelným ukazatelem. Nejčastějším důvodem je jediný řádek v grafických předpisech, který vypne výchozí orámování prohlížeče, protože bylo vnímáno jako rušivé. Správným řešením není nikdy odstranění, ale úprava vzhledu: rámeček ve firemní barvě, dostatečně výrazný, aby vynikl na jakémkoli pozadí.
Jak kontrolní služba měří viditelnost fokusu porovnáním pixelů
Kontrolní služba vyfotí každý kontrolovaný ovládací prvek dvakrát: jednou bez a jednou se zaostřením. Poté porovná oba snímky pixel po pixelu. Změní-li zaostření méně než 0,2 procenta pixelů v okolí prvku, je zobrazení fokusu prakticky neviditelné — kritérium se považuje za porušené a zpráva uvádí postižený prvek včetně dokladového snímku obrazovky. Neklidné prostředí, například kvůli animacím, měření rozpozná předběžným porovnáním dvou snímků bez zaostření a takové prvky vyjme z hodnocení. Navíc zpráva zaznamená, pokud grafické předpisy plošně vypínají orámování fokusu.
Příklady
Zaostření odstraněno
*:focus { outline: none; }:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }obrys: žádný nezpůsobí, že by klávesnice byla slepá.: focus- viditelný ukazuje rám pouze na klávesnici, ne na kliknutí myší.
- Projděte klávesou Tab svou domovskou stránku a sledujte: Je u každé zastávky jasně poznat, který prvek je právě vybrán?
- Požádejte svou agenturu, aby odstranila každé pravidlo, které plošně vypíná orámování fokusu.
- Nechte definovat upravený fokusový rámeček ve firemní barvě — dostatečně výrazný pro světlá i tmavá pozadí.
- Zkontrolujte fokus i na obrázcích a barevných plochách — tenký šedý rámeček tam rychle zmizí.
