Bouw toegankelijke modale Windows met A11y dialoogvenster

modals worden breed ondersteund in moderne browsers. Ze kunnen worden gebruikt als meldings popups, zoals opt-in velden, of zelfs voor diavoorstellingen met foto's.

Je kunt deze vensters bouwen met pure CSS maar dit is niet de meest toegankelijke oplossing. In plaats daarvan, check out A11y Dialog, een volledig functionerend modaal venster waarop de focus ligt toegankelijkheid eerst.

Het draait op vanille JavaScript met zijn eigen aangepaste API en ondersteunt alle moderne browsers op alle apparaten. Je kunt uitchecken deze demo om te zien hoe het eruit ziet in actie.

Het lijkt veel op een typisch modaal venster. Maar dit script maakt gebruik van ARIA-tags om moderne toegankelijkheid voor alle gebruikers te ondersteunen.

Standaard ook A11y-dialoogvenster ondersteunt touchscreens, dus tikken heeft hetzelfde effect als klikken. U kunt ergens buiten het venster klikken of tikken om het te sluiten of op een computer op de ESC-toets drukken.

Op de een of andere manier is deze bibliotheek vrij klein, slechts 1,2 kb, inclusief alle CSS- en JS-code. Dit maakt het lichtgewicht op de top van volledig toegankelijk.

U kunt meer leren door het door te lezen GitHub repo en A11y Dialog heeft zijn eigen documentatiepagina, te. Dit bevat een sectie over installatie & opstelling voor complete beginners. Er is ook een lange sectie over de DOM API voor het toevoegen van knoppen naar uw pagina die het modale venster kan openen (of sluiten).

Als je het probeert bouw meer toegankelijke websites serieus overwegen om A11y Dialog in uw projecten te gebruiken. Jij kan haal de broncode op van GitHub of download het van een pakketmanager zoals npm of Bower.

Neem een ​​kijkje op de hoofdpagina voor meer informatie over de setup en basis JavaScript-functies. Deze bibliotheek wordt geleverd met veel meer dan ARIA-toegankelijkheid, dus het is de moeite waard om te testen als je de functies van je modale windows wilt uitbreiden.