Zameranie klávesnicou (Focus)

Úvod

Používateľ, ktorý používa klávesnicu ako svoje primárne vstupné zariadenie, sa naviguje po webovej stránke tak, že preskakuje z jedného interaktívneho prvku na druhý. Vidiaci používateľ klávesnice preto potrebuje mať k dispozícii viditeľné zameranie (focus), ktoré mu pomáha určiť, na ktorom prvku sa momentálne nachádza a s ktorým môže interagovať.

V štandarde pre dizajnový manuál je zameranie pri navigácii pomocou klávesnice (focus) navrhnuté tak, aby spĺňalo požiadavky na kontrast pre netextové prvky (Kritérium úspešnosti 1.4.11 Kontrast netextových prvkov z WCAG 2.1).

Štýl zamerania

Komponent s aktívnou plochou označuje svoj zameraný stav orámovaním s hrúbkou 3 px, ktoré je umiestnené vo vzdialenosti 2 px od komponentu. Komponent s aktívnou plochou na svetlom pozadí označuje svoj zameraný stav oranžovým orámovaním (#D96E00), v záhlaví na tmavom pozadí bielym orámovaním (#FFF).

Príklady použitia

Hypertextový odkaz

Tlačidlo

Zaškrtávacie pole

Prepínacie pole

Textové pole

Viacriadkové textové pole

Viacriadkové textové pole

Kartička

Rázcestník

Omrvinková navigácia

Záhlavie

Pseudo trieda focus

Pseudo triedy využívame na definovanie špeciálneho stavu prvku. CSS pseudo-trieda :focus slúži na štýlovanie komponentu, ktorý je aktuálne zameraný pomocou klávesnice, teda je v stave `focus` (zameraný). Typickým príkladom komponentu, ktorý môže byť v stave focus, je formulárový prvok, napríklad textové pole alebo tlačidlo.

Príklad použitia

Ukážka štýlu pre viditeľné zameranie pomocou klávesnice, ktoré sa aplikuje na všetky zamerateľné prvky na webovom sídle.

:focus {
              outline: 2px solid #D96E00;
              outline-offset: 3px;
              background-color: transparent;
            }

Záhlavie, tmavé pozadie:

:focus {
              outline: 2px solid #FFF;
              outline-offset: 3px;
              background-color: transparent;
            }