Preskočiť na hlavný obsah
IDSK 3

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

Hypertextový odkaz – focus stav
Hypertextový odkaz v stave focus – vizuálna ukážka dizajnového systému.

Tlačidlo

Tlačidlo – focus stav
Tlačidlo v stave focus – vizuálna ukážka dizajnového systému.

Začiarkavacie pole

Začiarkavacie pole – focus stav
Začiarkavacie pole v stave focus – vizuálna ukážka dizajnového systému.

Prepínacie pole

Prepínacie pole – focus stav
Prepínacie pole v stave focus – vizuálna ukážka dizajnového systému.

Textové pole

Textové pole – focus stav
Textové pole v stave focus – vizuálna ukážka dizajnového systému.

Viacriadkové textové pole

Viacriadkové textové pole – focus stav
Viacriadkové textové pole v stave focus – vizuálna ukážka dizajnového systému.

Kartička

Kartička – focus stav
Kartička v stave focus – vizuálna ukážka dizajnového systému.

Rázcestník

Rázcestník – focus stav
Rázcestník v stave focus – vizuálna ukážka dizajnového systému.

Záhlavie

Záhlavie – focus stav
Záhlavie v stave focus – vizuálna ukážka dizajnového systému.

Omrvinková navigácia

Omrvinková navigácia – focus stav
Omrvinková navigácia v stave focus – vizuálna ukážka dizajnového systému.

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.

Štandardný focus

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

Záhlavie, tmavé pozadie

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