Byg tilgængelig Modal Windows med A11y Dialog

modals understøttes bredt i moderne browsere. De kan bruges som underretning popups, som opt-in felter, eller endda til foto diasshow.

Du kan opbygge disse vinduer ved hjælp af ren CSS men det er ikke den mest tilgængelige løsning. I stedet tjekke ud A11y Dialog, et fuldt fungerende modalvindue, der sætter fokus på tilgængelighed først.

Det kører på vanilla JavaScript med sin egen brugerdefineret API og understøtter alle moderne browsere på tværs af alle enheder. Du kan tjekke ud denne demo for at se, hvordan det ser ud i handling.

Det ser ud som et typisk modalt vindue. Men dette script bruger ARIA tags at understøtte moderne tilgængelighed for alle brugere.

Som standard er A11y Dialog også understøtter berøringsskærme, så tapping har samme effekt som at klikke på. Du kan klikke eller trykke et vilkårligt sted uden for vinduet for at lukke det, eller på en computer ramte ESC-tasten.

På en eller anden måde er dette bibliotek ret lille, kun 1,2 kb, herunder alle CSS og JS-koden. Dette gør det let på toppen af ​​fuldt tilgængeligt.

Du kan lære mere ved at læse gennem GitHub repo og A11y Dialog har sin egen dokumentationsside, også. Dette omfatter et afsnit om installation og opsætning til komplette begyndere. Der er også en lang sektion, der dækker DOM API for at tilføje knapper til din side, der kan åbne (eller lukke) det modale vindue.

Hvis du forsøger at bygge mere tilgængelige websteder alvorligt overveje at køre A11y Dialog i dine projekter. Du kan få kildekoden fra GitHub eller download den fra en pakkehåndtering som npm eller Bower.

Se på hovedsiden for at lære mere om opsætningen og de grundlæggende JavaScript-funktioner. Dette bibliotek følger med meget mere end ARIA tilgængelighed, så det er værd at teste, hvis du vil udvide funktionerne i dine modale vinduer.