Sestavte přístupná modální okna s dialogem A11y

Modály jsou široce podporovány v moderních prohlížečích. Mohou být použity jako oznamovací vyskakovací okna, tak jako opt-in pole, nebo dokonce prezentace fotografií.

Tato okna můžete vytvořit pomocí čisté CSS ale toto není nejpřístupnější řešení. Místo toho se podívejte A11y Dialog, plně funkční modální okno, na které se zaměřuje přístupnost.

To běží dál vanilla JavaScript s jeho vlastní API a podporuje všechny moderní prohlížeče napříč všemi zařízeními. Můžete se podívat toto demo vidět, jak to vypadá v akci.

Vypadá to jako typické modální okno. Ale tento skript používá tagy ARIA podporovat moderní přístupnost pro všechny uživatele.

Ve výchozím nastavení je také dialogové okno A11y podporuje dotykové obrazovky, takže klepání má stejný účinek jako kliknutí. Kliknutím nebo klepnutím kdekoli mimo okno jej zavřete nebo na počítači stiskněte klávesu ESC.

Tato knihovna je nějaká malá, pouze 1,2kb, včetně všech kódů CSS a JS. Díky tomu je lehký na vrcholu plně přístupné.

Můžete se dozvědět více čtením prostřednictvím GitHub repo a A11y Dialog má svůj vlastní dokumentace, také. To zahrnuje část o instalace a nastavení pro úplné začátečníky. K dispozici je také dlouhá sekce pokrývající DOM API pro přidávání tlačítek na vaši stránku, která může otevřít (nebo zavřít) modální okno.

Jestli se snažíš vybudovat přístupnější webové stránky vážně zvážit spuštění A11y Dialog ve vašich projektech. Můžeš získat zdrojový kód z GitHubu nebo si jej stáhněte z správce balíčků, jako je npm nebo Bower.

Podívejte se na hlavní stránku, kde se dozvíte více o nastavení a základních funkcích JavaScriptu. Tato knihovna přichází s mnohem více než dostupnost ARIA, takže to stojí za testování, pokud chcete rozšířit funkce modálních oken.