Crea finestre modali accessibili con la finestra di dialogo A11y

Modals sono ampiamente supportati nei browser moderni. Possono essere usati come popup di notifica, come campi opt-in, o anche per presentazioni fotografiche.

Puoi costruire queste finestre usando puro CSS ma questa non è la soluzione più accessibile. Invece, controlla A11y Dialog, una finestra modale completamente funzionante su cui si concentra l'attenzione prima l'accessibilità.

Funziona vaniglia JavaScript con i suoi propria API personalizzata e supporta tutti i browser moderni su tutti i dispositivi. Puoi controllare questa demo per vedere come appare in azione.

Sembra molto simile a una tipica finestra modale. Ma questo script usa i tag ARIA per supportare l'accessibilità moderna per tutti gli utenti.

Per impostazione predefinita, anche A11y Dialog supporta i touchscreen, così toccando ha lo stesso effetto del clic. È possibile fare clic o toccare in qualsiasi punto al di fuori della finestra per chiuderla, oppure su un computer premere il tasto ESC.

In qualche modo, questa libreria è piuttosto piccola, solo 1.2kb, incluso tutto il codice CSS e JS. Questo lo rende leggero e completamente accessibile.

Puoi imparare di più leggendo il Repository GitHub e A11y Dialog ha il suo propria pagina di documentazione, pure. Questo include una sezione su installazione e configurazione per principianti assoluti. C'è anche una lunga sezione che copre il DOM API per l'aggiunta di pulsanti alla tua pagina che può aprire (o chiudere) la finestra modale.

Se ci stai provando costruire siti web più accessibili considera seriamente l'esecuzione di A11y Dialog nei tuoi progetti. Puoi prendi il codice sorgente da GitHub o scaricarlo da un gestore di pacchetti come npm o Bower.

Dai un'occhiata alla pagina principale per saperne di più sulla configurazione e sulle funzioni JavaScript di base. Questa libreria viene fornita con molto più dell'accessibilità ARIA, quindi vale la pena provare se si desidera espandere le funzionalità delle finestre modali.