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).
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).
Tento text slúži iba ako ukážka naplneného obsahu v danom komponente. Nepoužívať pri implementácii a dizajne. Tento text slúži iba ako ukážka naplneného obsahu v danom komponente.
Nepoužívať pri implementácii a dizajne.
Tento text slúži iba ako ukážka naplneného obsahu v danom komponente. Nepoužívať pri implementácii a dizajne.
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.
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;
}