Bygg Tilgjengelig Modal Windows med A11y Dialog

Modals støttes mye i moderne nettlesere. De kan brukes som varsling popup-vinduer, som opt-in felt, eller til og med bildefremvisning.

Du kan bygge disse vinduene ved hjelp av rent CSS men dette er ikke den mest tilgjengelige løsningen. I stedet sjekk ut A11y Dialog, et fullt fungerende modalvindu som legger fokus på tilgjengelighet først.

Det går på Vanilla JavaScript med dens egen tilpasset API og støtter alle moderne nettlesere på tvers av alle enheter. Du kan sjekke ut denne demonstrasjonen for å se hvordan det ser ut i aksjon.

Det ser ut som et typisk modalvindu. Men dette skriptet bruker ARIA-koder for å støtte moderne tilgjengelighet for alle brukere.

Som standard, A11y Dialog også støtter berøringsskjermene, så tapping har samme effekt som å klikke. Du kan klikke eller trykke hvor som helst utenfor vinduet for å lukke det, eller på en datamaskin på ESC-tasten.

På en eller annen måte er dette biblioteket ganske lite, bare 1,2kb, inkludert alle CSS og JS-koden. Dette gjør det lett overfor fullt tilgjengelig.

Du kan lære mer ved å lese gjennom GitHub repo og A11y Dialog har sin egen dokumentasjonsside, også. Dette inkluderer en seksjon på installasjon og oppsett for komplette nybegynnere. Det er også en lang seksjon som dekker DOM API for å legge til knapper til siden din som kan åpne (eller lukke) det modale vinduet.

Hvis du prøver å bygge mer tilgjengelige nettsteder Seriøst vurdere å kjøre A11y Dialog i prosjektene dine. Du kan få kildekoden fra GitHub eller last den ned fra en pakkebehandling som npm eller Bower.

Ta en titt på hovedsiden for å lære mer om oppsettet og de grunnleggende JavaScript-funksjonene. Dette biblioteket kommer med mye mer enn ARIA-tilgjengelighet, så det er verdt å teste hvis du vil utvide funksjonene til dine modale vinduer.