Construire des fenêtres modales accessibles avec la boîte de dialogue A11y

Modaux sont largement supportés par les navigateurs modernes. Ils peuvent être utilisés comme popups de notification, comme champs opt-in, ou même pour diaporamas photo.

Vous pouvez construire ces fenêtres en utilisant CSS pur mais ce n'est pas la solution la plus accessible. Au lieu de cela, consultez A11y Dialog, une fenêtre modale pleinement opérationnelle qui met l'accent sur l'accessibilité d'abord.

Il fonctionne sur vanille JavaScript avec son propre API personnalisée et prend en charge tous les navigateurs modernes sur tous les appareils. Vous pouvez vérifier cette démo pour voir à quoi ça ressemble en action.

Cela ressemble beaucoup à une fenêtre modale typique. Mais ce script utilise les tags ARIA soutenir l'accessibilité moderne pour tous les utilisateurs.

Par défaut, A11y Dialog également prend en charge les écrans tactiles, donc tapoter a le même effet que cliquer. Vous pouvez cliquer ou appuyer n'importe où en dehors de la fenêtre pour la fermer, ou sur un ordinateur, appuyez sur la touche ÉCHAP..

D'une certaine manière, cette bibliothèque est assez petite, seulement 1.2kb, y compris tous les codes CSS et JS. Cela le rend léger au dessus de entièrement accessible.

Vous pouvez en apprendre plus en lisant le Repo GitHub et A11y Dialog a son propre page de documentation, aussi. Cela comprend une section sur installation et configuration pour les débutants complets. Il y a aussi une longue section couvrant la API DOM pour l'ajout de boutons à votre page qui peut ouvrir (ou fermer) la fenêtre modale.

Si vous essayez de créer des sites Web plus accessibles sérieusement envisager de lancer A11y Dialog dans vos projets. Vous pouvez obtenir le code source depuis GitHub ou téléchargez-le depuis un gestionnaire de paquets tel que npm ou Bower.

Consultez la page principale pour en savoir plus sur la configuration et les fonctionnalités de base de JavaScript. Cette bibliothèque est livrée avec beaucoup plus que l'accessibilité ARIA, il est donc intéressant de tester si vous souhaitez développer les fonctionnalités de vos fenêtres modales.