Představte si, že ovládáte web jen pomocí klávesnice. Mačkáním tabulátoru přeskakujete mezi jednotlivými interaktivními prvky na stránce. Jak poznáte, kde právě jste? Právě o tom je pravidlo „Viditelný focus“. Říká, že každý prvek, na který se dostanete klávesnicí, musí být viditelně označený.
Typický příklad: když projíždíte stránku tabulátorem, kolem tlačítka nebo odkazu se objeví rámeček. Pokud tenhle rámeček zmizí nebo není vidět, uživatel se snadno ztratí.
Co to znamená v praxi
- Když se uživatel dostane na prvek pomocí klávesnice:
- musí být jasně vidět, kde se nachází
- fokus musí být viditelný po celou dobu, kdy je prvek aktivní
- nestačí krátká animace nebo efekt, který rychle zmizí
- indikátor musí být jednoznačný a nepřehlédnutelný
- Indikátor může být například:
- rámeček (outline)
- změna barvy
- stín nebo jiné zvýraznění
:focus-visible {
outline: 3px solid blue;
outline-offset: 4px;
}Časté chyby
- Fokus je nastvený na:
outline: none; - Fokus je příliš slabý (např. světle šedý na bílém pozadí)
- Fokus je viditelný jen při použití myši, ne klávesnice
- Interaktivní prvky (např. tlačítka) nemají žádný focus styl