Construir ventanas modales accesibles con diálogo A11y

Modales Son ampliamente compatibles en los navegadores modernos. Se pueden utilizar como ventanas emergentes de notificación, como campos opt-in, o incluso para presentaciones de fotos.

Puedes construir estas ventanas usando CSS puro Pero esta no es la solución más accesible. En su lugar, echa un vistazo Diálogo A11y, una ventana modal completamente funcional que pone el foco en accesibilidad primero.

Se ejecuta en vainilla JavaScript con su propia API personalizada y soporta todos los navegadores modernos en todos los dispositivos. Puedes echar un vistazo esta demo Para ver cómo se ve en acción..

Se parece mucho a una ventana modal típica. Pero, este guión usa etiquetas ARIA Para apoyar la accesibilidad moderna para todos los usuarios..

Por defecto, A11y Dialog también soporta pantallas táctiles, así que tocar tiene el mismo efecto que hacer clic. Puede hacer clic o tocar en cualquier lugar fuera de la ventana para cerrarla, o en una computadora presione la tecla ESC.

De alguna manera, esta biblioteca es bastante pequeña., solo 1.2kb, Incluyendo todo el código CSS y JS. Esto lo hace ligero encima de totalmente accesible.

Puedes aprender más leyendo a través de GitHub repo y A11y Dialog tiene su propia página de documentación, también. Esto incluye una sección en instalación y configuración Para principiantes completos. También hay una sección larga que cubre el API de DOM para agregar botones a su página que puede abrir (o cerrar) la ventana modal.

Si estas tratando de construir sitios web más accesibles Considere seriamente la posibilidad de ejecutar A11y Dialog en sus proyectos. Usted puede obtener el código fuente desde GitHub o descárguelo desde un gestor de paquetes como npm o Bower.

Eche un vistazo a la página principal para obtener más información sobre la configuración y las funciones básicas de JavaScript. Esta biblioteca viene con mucho más que accesibilidad ARIA, así que vale la pena probar si desea expandir las características de sus ventanas modales.