Micromodal.js – совместимый с WAI-ARIA модальный скрипт, ориентированный на доступность

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

Если вы хотите более серьезно относиться к своей доступности UX, попробуйте Micromodal.js. Это бесплатный сценарий модального окна с открытым исходным кодом, полностью соответствующий требованиям доступности WAI-ARIA.

Некоторые веб-сайты могут обойтись без особого беспокойства по этой теме.

Однако для многих крупных сайтов, особенно государственных, требуется полное соответствие требованиям доступности.

Модальный скрипт Micromodal.js

Библиотека находится на большей стороне, всего около 2 КБ при минификации. Я знаю, что это не так много, но это не самый маленький модальный скрипт.

Тем не менее, я думаю, что это ценный актив для большинства веб-мастеров, потому что он поддерживает всех типов посетителей на всех современных устройствах, которые только можно себе представить.

И он не нервный или плохо спроектированный, как большинство обычных скриптов. На самом деле здесь используются пользовательские CSS / JS-анимации для затухания и предотвращается перемещение символа решетки (#) по странице вверх при каждом щелчке.

Это второстепенные детали для разработчиков, но они очень важны для пользовательского опыта.

Взгляните на Главная страница для живой демонстрации вместе с документацией. В установить раздел довольно четкий, и вы сможете запустить его за 10-15 минут редактирования.

Пример анимированного микромода

И если вы ищете несколько демонстрационных стилей для этого модального окна, посмотрите этот Gist.

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

Просто возьмите бесплатную копию скрипта вне GitHub и приступить к работе прямо сейчас.

Ваши посетители оценят приложенные усилия.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *