Збірка доступних модальних Windows з діалоговим вікном A11y

Модаль широко підтримуються в сучасних браузерах. Їх можна використовувати як спливаючі вікна сповіщень, як поля ввімкнення, або навіть для фото слайд-шоу.

Ви можете побудувати ці вікна за допомогою чистий CSS але це не найдоступніше рішення. Замість цього перевірте Діалогове вікно A11y, повнофункціональне модальне вікно, на яке зосереджено увагу доступність в першу чергу.

Він працює на ванільний JavaScript з її власний користувальницький API і підтримує всі сучасні браузери на всіх пристроях. Ви можете перевірити це демо щоб побачити, як вона виглядає в дії.

Це виглядає так само, як типове модальне вікно. Але, цей сценарій використовує теги ARIA підтримувати сучасну доступність для всіх користувачів.

За замовчуванням також діалогове вікно A11y підтримує сенсорні екрани, тому натискання має той самий ефект, що і клік. Ви можете натиснути або натиснути будь-де за межами вікна, щоб закрити його, або натиснути клавішу ESC на комп'ютері.

Так чи інакше, ця бібліотека досить мала, лише 1,2 кб, включаючи весь код CSS та JS. Це робить його легким поверх повністю доступних.

Більше можна дізнатися, прочитавши GitHub repo Діалог A11y має свій власну сторінку документації, теж. Це включає розділ про встановлення та налаштування для початківців. Там також довгий розділ, що охоплює DOM API для додавання кнопок на вашу сторінку, яка може відкривати (або закривати) модальне вікно.

Якщо ви намагаєтеся створювати більш доступні веб-сайти серйозно розглянути можливість запуску діалогового вікна A11y у ваших проектах. Ти можеш отримати вихідний код від GitHub або завантажте його з менеджера пакетів, наприклад, npm або Bower.

Погляньте на головну сторінку, щоб дізнатися більше про налаштування та основні функції JavaScript. Ця бібліотека постачається разом набагато більше, ніж доступність ARIA, тому варто перевірити, чи хочете ви розширити можливості модальних вікон.