Pravidla WCAG 2.2 AA, která kit drží za obrazovky, kontrastní tokeny, klávesy platné všude a tři zkoušky před vydáním.
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í.
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á.
--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-5 je jen pro dělicí linky a neaktivní stav, nikdy pro čitelný obsah — na AA nedosáhne (1,49 : 1 na bílé) a dosáhnout nemá. Nejsvětlejší inkoust, který se ještě smí číst, je --ink-4 s 5,85 : 1.--border-strong, ne --border. S běžným obrysem by hranice pole na světlé ploše zmizela.Prstenec fokusu je token, ne rozhodnutí každé komponenty: --focus-ring je šířka, --focus-ring-offset odsazení a barva je --accent, takže prstenec jde s vybranou rodinou akcentu. Mezera mezi prvkem a prstencem se maluje barvou stránky — proto je prstenec vidět na tmavém tlačítku stejně jako na světlém. Ovládací prvek, který stojí sám, dostane prstenec vně; řádek přes celou šířku uvnitř posuvného seznamu ho dostane dovnitř, jinak by ho ten seznam ustřihl. 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í.
| Klávesa | Chování |
|---|---|
Tab | Pořadí odpovídá vizuálnímu pořadí; skryté prvky z pořadí vypadávají. |
Esc | Zavře boční panel, modální okno i rozbalené menu; fokus se vrací na prvek, který je otevřel. |
↑ ↓ | Pohyb v seznamu a v rozbaleném menu; fokus neuteče mimo komponentu. |
Cmd/Ctrl K | Globální hledání odkudkoli. |
Enter | Potvrdí formulář; v tabulce otevře detail zvýrazněného řádku. |
Tlačítko má 34 px, ikonové 28 a zaškrtávátko 16. Prstem se to na telefonu netrefuje, a nejhůř dopadají řádkové akce v tabulce a zavírací křížky. WCAG 2.5.5 i pravidla Applu chtějí 44 × 44 px.
Prvky se ale nezvětšují. Větší tlačítko na dotyku by posunulo layout a rozbilo linku 34 px, na které stojí filtr bar — a změněná výška je major. Roste tedy jen dotyková plocha: průhledný ::before se záporným insetem, aktivní pouze pod pointer: coarse. Nic se nekreslí, nic se nepřepočítává a na myši neplatí ani jedna deklarace.
touch-target roste do obou os. Pro prvek, který má kolem sebe místo — tlačítko, přepínač.touch-target-y roste jen nahoru a dolů. Pro prvky stojící vedle sebe: řádkové akce mají mezeru 2 px, takže plocha do stran by sahala přes souseda a klepnutí by dostal ten, kdo je v DOM později. Na řádku, kde je Upravit vedle Smazat, to není zaokrouhlovací chyba.touch-row místo toho zvedne celý řádek na 44 px. Pro zaškrtávátko a přepínač volby: ::before na nahrazovaném prvku žádný box nevytvoří, takže input plochu nést neumí — a naskládané volby jsou 6 px od sebe, kde by stejně zakryla sousedovi popisek. Popisek obaluje prvek i text, takže cílem je celý řádek.Utility jsou v presetu balíčku, ne ve stylech dokumentačního webu — jinak by je konzument nedostal a třídy v komponentách by u něj nekreslily nic.
Jedna mez, kterou je potřeba znát: plocha přesahuje prvek, takže ji overflow: hidden na kterémkoli předkovi ustřihne zpátky na jeho hranu. Změřeno na kartě s overflow-hidden: prvek dostal zpátky svou původní výšku. Když má obal ořez, musí prvku místo udělat obal — plocha si ho vzít neumí.
Odečítač obrazovky nevidí rozvržení — čte roli, jméno a stav. Co obrazovka sděluje tvarem, musí sdělit i jimi.
aria-label se slovesem; dekorativní ikona se odečítači nehlásí.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.aria-live="polite"; assertive je vyhrazené kritické chybě, protože přeruší, co odečítač právě čte.scope, jinak odečítač neví, ke kterému sloupci buňka patří; vybraný řádek nese aria-selected.aria-describedby — ne jen barvou rámečku, kterou odečítač nepřečte.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.