Erstellen Sie ein barrierefreies modales Fenster mit dem A11y-Dialogfeld

Modals werden in modernen Browsern weitgehend unterstützt. Sie können als verwendet werden Benachrichtigungs-Popups, wie Opt-in-Felder, oder sogar für Foto-Diashows.

Sie können diese Fenster mit erstellen reines CSS Dies ist jedoch nicht die einfachste Lösung. Überprüfen Sie stattdessen A11y Dialog, ein voll funktionsfähiges modales Fenster, in dem der Fokus liegt Erreichbarkeit zuerst.

Es läuft weiter Vanille JavaScript mit eigene benutzerdefinierte API und unterstützt alle modernen Browser auf allen Geräten. Sie können auschecken diese Demo um zu sehen, wie es in Aktion aussieht.

Es sieht aus wie ein typisches modales Fenster. Aber dieses Skript verwendet ARIA-Tags um moderne Zugänglichkeit für alle Benutzer zu unterstützen.

Standardmäßig auch A11y-Dialog unterstützt Touchscreens, Das Tippen hat also den gleichen Effekt wie das Klicken. Sie können auf eine Stelle außerhalb des Fensters klicken oder tippen, um es zu schließen, oder auf einem Computer die ESC-Taste drücken.

Irgendwie ist diese Bibliothek ziemlich klein, nur 1,2 kb, einschließlich aller CSS- und JS-Codes. Dies macht es leicht und vollständig zugänglich.

Sie können mehr durch das Lesen der GitHub-Repo und A11y Dialog hat seine eigene Dokumentationsseite, auch. Dies beinhaltet einen Abschnitt über Installation & Setup für komplette Anfänger. Es gibt auch einen längeren Abschnitt über die DOM-API zum Hinzufügen von Schaltflächen zu Ihrer Seite, die das modale Fenster öffnen (oder schließen) kann.

Wenn du es versuchst barrierefreiere Websites erstellen Erwägen Sie ernsthaft, A11y Dialog in Ihren Projekten auszuführen. Sie können Holen Sie sich den Quellcode von GitHub herunterladen oder von einem Paketmanager wie npm oder Bower herunterladen.

Schauen Sie sich die Hauptseite an, um mehr über das Setup und die grundlegenden JavaScript-Funktionen zu erfahren. Diese Bibliothek kommt mit weit mehr als nur ARIA-Zugänglichkeit, Es lohnt sich also zu testen, ob Sie die Funktionen Ihrer modalen Fenster erweitern möchten.