Как стать автором
Обновить

Плагин для Bootstrap 3, повышающий accessibility интерфейсов

Время на прочтение2 мин
Количество просмотров17K
Набор инструментов Bootstrap пользуется достаточно большой популярностью среди разработчиков. Тем не менее, интерфейсы, получающиеся с его помощью, зачастую имеют проблемы с accessibility, то есть с доступностью для пользователей с ограниченными возможностями. В результате, получившийся интерфейс может не соответствовать предъявляемым к нему требованиям, так как часто accessibility является одним из пунктов технического задания, да и в принципе не очень доступный интерфейс — это уже плохо.

Команда разработчиков PayPal некоторое время работала над решением ряда проблем доступности в Bootstrap 3, итогом чего стало появление accessibility плагина, который недавно был выложен в открытый доступ. Фактически он позволяет реализовать доступность интерфейса на базовом уровне без каких-либо особых знаний в этой области.

Bootstrap Accessibility Plugin представляет собой дополнительный модуль на JavaScript, подключающийся без модификации основного кода Bootstrap. Основные улучшения доступности, которые обеспечивает данный плагин, заключаются в реализации навигации с клавиатуры и поддержке основных программ экранного доступа. Кроме того, есть некоторые незначительные улучшения контрастности alert-сообщений.

Для некоторых виджетов, таких как вкладки, карусели, раскрывающиеся меню и др., событие onKeyDown используется для обеспечения возможности управления с компьютерной клавиатуры. В результате, пользователи, испытывающие проблемы при работе с мышью, имеют возможность работать при помощи табуляции и курсорных клавиш.

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

Соотношение цветов фона и данных на переднем плане в alert-сообщениях Bootstrap может оказаться недостаточным для людей, имеющих ослабленное зрение, поэтому плагин также корректирует эти параметры, делая общий вид более контрастным.

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

Bootstrap Accessibility Plugin распространяется на условиях лицензии BSD, а его исходный код доступен на GitHub.
Теги:
Хабы:
Всего голосов 36: ↑32 и ↓4+28
Комментарии1

Публикации

Работа

Веб дизайнер
28 вакансий

Ближайшие события