Vzory prístupných komponentov
Argument tohto webového sídla je jednoduchý: prístupnosť a pekný dizajn nie sú v rozpore. Každý komponent nižšie si môžete vyskúšať naživo, prečítať si, prečo funguje pre ľudí s klávesnicou, čítačom obrazovky či veľkým priblížením, a skopírovať si jeho kód.
Všetky komponenty sú postavené na štandardných webových technológiách bez frameworkov: sú to samostatné webové komponenty, ktoré vylepšujú HTML fungujúce aj bez JavaScriptu. Každý sa riadi vzorom z WAI-ARIA Authoring Practices Guide (externý odkaz) a uvádzame pri ňom kritériá WCAG 2.2, ktoré ukazuje v praxi.
Stránky sú písané pre ľudí, ktorí o produkte rozhodujú, nie pre vývojárov. Ak potrebujete technické detaily, každý komponent má pri sebe dokumentáciu v repozitári tohto webového sídla.
-
Rozbaľovacia navigácia
Hlavná navigácia, ktorá sa na úzkych obrazovkách zbalí za tlačidlo Menu, oznamuje svoj stav, zatvára sa klávesom Escape a bez JavaScriptu zostáva jednoducho viditeľná.
- 2.1.1 Klávesnica
- 2.1.2 Žiadna pasca na klávesy
- 2.4.1 Preskočenie blokov
-
Dialógové okno
Modálne okno na natívnom prvku dialog: zvyšok stránky je neaktívny, zameranie zostáva v okne a po zavretí sa vráti tam, odkiaľ prišlo.
- 1.3.1 Informácie a vzájomné vzťahy
- 1.4.10 Zmena usporiadania obsahu
- 2.1.2 Žiadna pasca na klávesy
-
Karty
Karty s prepínaním šípkami, jedným miestom v poradí Tab a voľbou medzi automatickou a manuálnou aktiváciou.
- 1.3.1 Informácie a vzájomné vzťahy
- 2.1.1 Klávesnica
- 2.4.3 Poradie prechádzania prvkami
-
Harmonika
Rozbaľovacie sekcie postavené na natívnych prvkoch details a summary, s režimom „naraz len jedna“ a animovaným otváraním.
- 1.3.1 Informácie a vzájomné vzťahy
- 2.1.1 Klávesnica
- 2.3.3 Animácie z interakcií
-
Vyhľadávanie
Vyhľadávacie pole ako combobox: výsledky sa zobrazujú počas písania, šípky ich prechádzajú, čítač obrazovky počuje počet výsledkov a bez JavaScriptu formulár vedie na mapu webového sídla.
- 1.3.1 Informácie a vzájomné vzťahy
- 2.1.1 Klávesnica
- 2.4.5 Viacero spôsobov
-
Stavové správy
Krátke oznamy, ktoré čítač obrazovky prečíta bez prerušenia práce a ktoré sa nedajú stratiť: časovač sa zastaví, kým na správu ukazujete alebo ju máte zameranú.
- 4.1.3 Stavové správy
- 2.2.1 Nastaviteľné načasovanie
- 2.2.4 Prerušenia
-
Tooltip
Vysvetlivka, ktorá sa zobrazí pri prejdení myšou aj pri zameraní klávesnicou, dá sa zavrieť klávesom Escape a nezmizne, kým na ňu ukazujete.
- 1.4.13 Obsah pri zameraní myšou alebo klávesnicou
- 1.3.1 Informácie a vzájomné vzťahy
- 2.1.1 Klávesnica
-
Prepínač vzhľadu
Trojstavový výber svetlého, tmavého alebo systémového vzhľadu ako natívna skupina prepínačov, s uloženou voľbou a oznámením zmeny.
- 1.4.3 Kontrast (minimálny)
- 1.4.11 Kontrast netextových prvkov
- 1.3.1 Informácie a vzájomné vzťahy
-
Graf
Stĺpcový graf v SVG s názvom, popisom a úplnou dátovou tabuľkou, ktorý rozlišuje stĺpce vzorom, nielen farbou, takže funguje aj čiernobielo.
- 1.1.1 Netextový obsah
- 1.4.1 Používanie farieb
- 1.4.3 Kontrast (minimálny)
-
Cookie lišta
Lišta so súhlasom s cookies, ktorá nekradne zameranie, nezavadzia, dá sa zavrieť klávesom Escape a voľbu možno kedykoľvek zmeniť. Bez pluginu, bez cookies pred súhlasom.
- 2.4.3 Poradie prechádzania prvkami
- 2.1.2 Žiadna pasca na klávesy
- 2.4.11 Nezakryté zameranie (minimálne)