Zgradite dostopno modalno okno z A11y pogovornim oknom

Modali v sodobnih brskalnikih. Uporabljajo se lahko kot obvestila, kot opt-in polja, ali celo za diaprojekcije fotografij.

Ta okna lahko zgradite z uporabo čisti CSS vendar to ni najbolj dostopna rešitev. Namesto tega preverite Pogovorno okno A11y, popolnoma delujoče modalno okno, na katerega se osredotočamo dostopnost.

Teče naprej vanilija JavaScript s svojimi lastni API po meri in podpira vse sodobne brskalnike na vseh napravah. Lahko preverite ta demo da vidite, kako izgleda v akciji.

Zdi se, da je podobno tipičnemu modalnemu oknu. Ampak, ta scenarij uporablja oznake ARIA za podporo sodobne dostopnosti za vse uporabnike.

Privzeto je tudi A11y Dialog podpira zaslon na dotik, tako, da ima tapkanje enak učinek kot klik. Lahko kliknete ali tapnete kjerkoli zunaj okna, da ga zaprete, ali pa na računalniku pritisnete tipko ESC.

Knjižnica je nekako majhna, samo 1.2kb, vključno s kodo CSS in JS. Zaradi tega je lahek na vrhu popolnoma dostopen.

Več lahko izveste tako, da preberete GitHub repo in A11y Dialog lastno stran dokumentacije, tudi. To vključuje tudi razdelek o namestitev in nastavitev za popolne začetnike. Obstaja tudi dolg odsek, ki pokriva DOM API za dodajanje gumbov na svojo stran, ki lahko odpre (ali zapre) modalno okno.

Če poskušate graditi bolj dostopna spletna mesta resno razmislite o izvajanju programa A11y Dialog v svojih projektih. Ti lahko dobite izvorno kodo iz GitHub ali ga prenesite iz upravitelja paketov, kot je npm ali Bower.

Oglejte si glavno stran, če želite izvedeti več o nastavitvah in osnovnih funkcijah JavaScripta. Ta knjižnica je priložena veliko več kot dostopnost ARIA, zato je vredno preveriti, če želite razširiti funkcije modalnih oken.