Přístupnost

Cílová laťka je WCAG 2.2 AA a celý admin se ovládá z klávesnice. Není to jen povinnost: obsluha výroby pracuje klávesou rychleji než myší. Většinu pravidel drží komponenty samy — proto se obrazovky skládají z nich a ne z opsaných tříd, se kterými se laťka ztrácí.

• Vše jde ovládat klávesnicí a fokus je vždy vidět — prstenec se nikdy nevypíná.
• Barva nikdy nenese význam sama: stav doprovází text nebo tvar. „Po termínu“ se píše slovem, ne jen červenou tečkou. Platí to i pro grafy a barevné tečky operací.
• Nadpisy jdou po úrovních bez přeskakování — odečítač se podle nich orientuje.

Kontrast se nehádá od oka — paleta je na něj měřená, takže stačí sáhnout po správném tokenu. Barva mimo tokeny tu záruku nemá.

• Text nejméně 4,5 : 1. --ink, --ink-2 a --ink-3 drží AA na bílé ploše i na --surface-2, ve světlém i tmavém motivu.
• --ink-4 je jen pro neaktivní stav a dekoraci, nikdy pro čitelný obsah — na AA nedosáhne a dosáhnout nemá.
• Nesouvislé prvky potřebují nejméně 3 : 1: obrys vstupu, přepínač i zaškrtávátko proto berou --border-strong, ne --border. S běžným obrysem by hranice pole na světlé ploše zmizela.

Prstenec fokusu je 2px v barvě --accent s odsazením 2px. Vstup dostane navíc měkký prstenec 3px v --accent-bg, aby bylo pole poznat i na zvednuté ploše. outline: none bez náhrady se nepoužívá nikdy — je to nejrychlejší způsob, jak obrazovku pro klávesnici zavřít.

Pět kláves platí napříč celým adminem. Obrazovka si je nepředefinovává — přeučená klávesa stojí uživatele víc než ta chybějící.

Odečítač obrazovky nevidí rozvržení — čte roli, jméno a stav. Co obrazovka sděluje tvarem, musí sdělit i jimi.

• Ikonové tlačítko má vždy aria-label se slovesem; dekorativní ikona se odečítači nehlásí.
• Modální okno a boční panel mají role="dialog", aria-modal="true" a uzavřený fokus; zbytek stránky je pod nimi označený jako inert, aby se do něj nedalo protabovat.
• Hlášky a validace jdou do aria-live="polite"; assertive je vyhrazené kritické chybě, protože přeruší, co odečítač právě čte.
• Tabulka má skutečné hlavičkové buňky se scope, jinak odečítač neví, ke kterému sloupci buňka patří; vybraný řádek nese aria-selected.
• Chyba pole se váže na pole přes aria-describedby — ne jen barvou rámečku, kterou odečítač nepřečte.
• Klikatelná plocha nejméně 32 × 32 px v hustých tabulkách, na dotykovém zařízení 44 × 44 px.
• prefers-reduced-motion vypíná posuny a animace; zůstává jen změna barvy.

Tři rychlé zkoušky před vydáním obrazovky. Neměří všechno — ale co neprojde jimi, neprojde ani ničím dalším.

1. Projdi obrazovku jen klávesou Tab: každý prvek je dosažitelný, fokus je vidět a nikde se nezacyklí.
2. Přibliž na 200 %: nic nepřeteče, nic se nepřekryje, text se neuřízne, tabulka scrolluje vodorovně a horní lišta se nerozpadne.
3. Představ si obrazovku v šedotisku: každý stav musí být poznat i bez barvy.