Hozzáférhető modális ablakok létrehozása az A11y párbeszédpanel segítségével

modals a modern böngészők széles körben támogatják. Ezek felhasználhatók értesítési felugró ablakok, mint opt-in mezők, vagy akár fénykép diavetítések.

Ezeket az ablakokat építheti tiszta CSS de ez nem a leginkább elérhető megoldás. Ehelyett nézd meg A11y párbeszédablak, egy teljesen működő modális ablak, amely a hangsúlyt helyezi hozzáférhetőséget először.

Ez fut vanília JavaScript vele saját egyéni API és támogatja az összes modern böngészőt minden eszközön. Megnézheted ez a demó hogy lássa, hogyan néz ki a cselekvésben.

Úgy tűnik, mint egy tipikus modális ablak. De ez a forgatókönyv ARIA-címkéket használ a modern hozzáférhetőség támogatása minden felhasználó számára.

Alapértelmezés szerint az A11y párbeszédpanel is támogatja az érintőképernyőket, így a megérintés ugyanaz, mint a kattintással. Az ablak bezárásához kattintson vagy érintse meg, vagy bezárja a számítógépet, vagy a számítógépen nyomja meg az ESC billentyűt.

Valahogy ez a könyvtár elég kicsi, csak 1.2kb, beleértve az összes CSS és JS kódot. Ez könnyűvé teszi a teljes hozzáférhetőség tetején.

Tudjon meg többet, ha elolvassa a GitHub repo és az A11y párbeszédablak rendelkezik saját dokumentációs oldal, is. Ez magában foglal egy részt is telepítés és beállítás teljes kezdőknek. Van egy hosszú szakasz is, amely a DOM API gombok hozzáadásához az oldalhoz, amely megnyithatja (vagy zárhatja) a modális ablakot.

Ha próbálsz hozzáférhetőbb weboldalak létrehozása komolyan fontolja meg az A11y párbeszédablak futtatását a projektekben. tudsz kap a forráskódot a GitHub-ból, vagy töltse le azt egy olyan csomagkezelőből, mint az npm vagy a Bower.

Tekintse meg a főoldalon, hogy többet tudjon meg a telepítő és az alapvető JavaScript funkciókról. Ez a könyvtár tartalmazza sokkal több, mint az ARIA hozzáférhetősége, ezért érdemes tesztelni, ha bővíteni szeretné a modális ablakok szolgáltatásait.