Создание доступной модальной Windows с диалогом A11y

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

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

Он работает на ванильный JavaScript с этими собственный пользовательский API и поддерживает все современные браузеры на всех устройствах. Вы можете проверить это демо чтобы увидеть, как это выглядит в действии.

Это выглядит очень похоже на типичное модальное окно. Но этот сценарий использует теги ARIA поддерживать современную доступность для всех пользователей.

По умолчанию A11y Dialog также поддерживает сенсорные экраны, поэтому нажатие имеет тот же эффект, что и нажатие. Вы можете нажать или нажать в любом месте за пределами окна, чтобы закрыть его, или на компьютере нажмите клавишу ESC.

Почему-то эта библиотека довольно маленькая, только 1,2 КБ, включая весь код CSS и JS. Это делает его легким поверх полностью доступным.

Вы можете узнать больше, прочитав GitHub репо а у А11й Диалог есть свои собственная страница документации, тоже. Это включает в себя раздел о установка и настройка для начинающих. Там также длинный раздел, охватывающий DOM API для добавления кнопок на вашу страницу, которая может открыть (или закрыть) модальное окно.

Если вы пытаетесь создавать более доступные веб-сайты серьезно подумайте о запуске A11y Dialog в своих проектах. Вы можете получить исходный код с GitHub или загрузите его из менеджера пакетов, такого как npm или Bower.

Взгляните на главную страницу, чтобы узнать больше о настройке и основных функциях JavaScript. Эта библиотека поставляется с намного больше, чем доступность ARIA, так что стоит попробовать, если вы хотите расширить возможности ваших модальных окон.