Izgradite pristupačni modalni sustav Windows s A11y dijalogom

Modals široko su podržane u modernim preglednicima. Mogu se koristiti kao skočni prozori obavijesti, kao polja za uključivanje, ili čak za slideshow fotografija.

Ove prozore možete izgraditi pomoću čisti CSS ali ovo nije najdostupnije rješenje. Umjesto toga, odjavite se Dijalog A11y, potpuno funkcionalan modalni prozor na koji se fokusira najprije pristupačnost.

Pokreće se vanilija JavaScript sa svojim vlastiti prilagođeni API i podržava sve moderne preglednike na svim uređajima. Možete provjeriti ovaj demo da biste vidjeli kako izgleda u akciji.

Čini se da je sličan tipičnom modalnom prozoru. Ali, ova skripta koristi oznake ARIA za podršku moderne pristupačnosti za sve korisnike.

Prema zadanim postavkama, A11y Dialog također podržava zaslon osjetljiv na dodir, tako da tapkanje ima isti učinak kao i klik. Možete kliknuti ili kucnuti bilo gdje izvan prozora da biste ga zatvorili ili na računalu pritisnuti tipku ESC.

Nekako je ova knjižnica prilično mala, samo 1.2kb, uključujući sve CSS i JS kodove. To ga čini laganim na vrhu potpuno dostupnim.

Više možete saznati čitanjem kroz GitHub repo i A11y Dijalog ima svoj vlastitu stranicu dokumentacije, isto. To uključuje i odjeljak o instalacija i postavljanje za početnike. Tu je i dugačak odjeljak koji pokriva DOM API za dodavanje gumba na svoju stranicu koja može otvoriti (ili zatvoriti) modalni prozor.

Ako pokušavate izgraditi pristupačnije web-lokacije ozbiljno razmislite o pokretanju A11y dijaloga u svojim projektima. Možeš dobiti izvorni kod ili preuzmite s upravitelja paketa kao što je npm ili Bower.

Pogledajte glavnu stranicu da biste saznali više o postavkama i osnovnim značajkama JavaScripta. Ova knjižnica dolazi s mnogo više od dostupnosti ARIA-e, stoga je vrijedno provjeriti želite li proširiti značajke modalnih prozora.