Vzory přístupných komponent
Argument tohoto webu je jednoduchý: přístupnost a hezký design nejsou v rozporu. Každou komponentu níže si můžete vyzkoušet naživo, přečíst si, proč funguje pro lidi s klávesnicí, odečítačem obrazovky nebo velkým zvětšením, a zkopírovat si její kód.
Všechny komponenty jsou postavené na standardních webových technologiích bez frameworků: jsou to samostatné webové komponenty, které vylepšují HTML funkční i bez JavaScriptu. Každá se řídí vzorem z WAI-ARIA Authoring Practices Guide (externí odkaz) a uvádíme u ní kritéria WCAG 2.2, která v praxi ukazuje.
Stránky jsou psané pro lidi, kteří o produktu rozhodují, ne pro vývojáře. Pokud potřebujete technické detaily, každá komponenta má u sebe dokumentaci v repozitáři tohoto webu.
-
Rozbalovací navigace
Hlavní navigace, která se na úzkých obrazovkách sbalí za tlačítko Menu, oznamuje stav, zavírá se klávesou Escape a bez JavaScriptu zůstává viditelná.
- 2.1.1 Klávesnice
- 2.1.2 Žádná past na klávesy
- 2.4.1 Přeskočení bloků
-
Dialogové okno
Modální okno na nativním prvku dialog: zbytek stránky je neaktivní, zaměření zůstává v okně a po zavření se vrátí tam, odkud přišlo.
- 1.3.1 Informace a vztahy
- 1.4.10 Přizpůsobení obsahu (reflow)
- 2.1.2 Žádná past na klávesy
-
Karty
Karty s přepínáním šipkami, jedním místem v pořadí Tab a volbou mezi automatickou a manuální aktivací.
- 1.3.1 Informace a vztahy
- 2.1.1 Klávesnice
- 2.4.3 Pořadí zaměření
-
Harmonika
Rozbalovací sekce postavené na nativních prvcích details a summary, s režimem „najednou jen jedna“ a animovaným otevíráním.
- 1.3.1 Informace a vztahy
- 2.1.1 Klávesnice
- 2.3.3 Animace vyvolané interakcí
-
Vyhledávání
Vyhledávací pole jako combobox: výsledky během psaní, šipky je procházejí, odečítač obrazovky slyší jejich počet a bez JavaScriptu vede formulář na mapu webu.
- 1.3.1 Informace a vztahy
- 2.1.1 Klávesnice
- 2.4.5 Více způsobů
-
Stavové zprávy
Krátká oznámení, která odečítač obrazovky přečte bez přerušení a která nezmizí: časovač se zastaví, dokud na zprávu ukazujete nebo ji máte zaměřenou.
- 4.1.3 Stavové zprávy
- 2.2.1 Nastavitelné časování
- 2.2.4 Přerušení
-
Tooltip
Vysvětlivka, která se zobrazí při přejetí myší i při zaměření klávesnicí, dá se zavřít klávesou Escape a nezmizí, dokud na ni ukazujete.
- 1.4.13 Obsah zobrazený po najetí myší nebo zaměření
- 1.3.1 Informace a vztahy
- 2.1.1 Klávesnice
-
Přepínač vzhledu
Třístavový výběr světlého, tmavého nebo systémového vzhledu jako nativní skupina přepínačů, s uloženou volbou a oznámením změny.
- 1.4.3 Kontrast (minimální)
- 1.4.11 Kontrast netextového obsahu
- 1.3.1 Informace a vztahy
-
Graf
Sloupcový graf v SVG s názvem, popisem a úplnou datovou tabulkou, který rozlišuje sloupce vzorem, nejen barvou, takže funguje i černobíle.
- 1.1.1 Netextový obsah
- 1.4.1 Použití barev
- 1.4.3 Kontrast (minimální)
-
Cookie lišta
Lišta se souhlasem s cookies: nekrade zaměření, nepřekáží, zavírá se klávesou Escape a volbu lze kdykoli změnit. Bez pluginu, bez cookies před souhlasem.
- 2.4.3 Pořadí zaměření
- 2.1.2 Žádná past na klávesy
- 2.4.11 Nezakryté zaměření (minimální)