Доступность
Краткий обзор возможностей и ограничений Bootstrap для создания доступного контента.
Bootstrap – легкий в использовании фреймворк готовых стилей, инструментов разметки и интерактивных компонентов, позволяющий разработчикам создавать красивые, богатые функционалом и создаваемые за считанные часы приложения и сайты.
Обзор и ограничения
Итоговая доступность и «user-friendliness» проекта на Bootstrap зависит в большой степени от разметки автора, его дополнительных стилей и добавленных им скриптов. Однако, при условии, что все перечисленное работает корректно, созданные на BS4 сайты в идеале должны отвечать WCAG 2.0 (A/AA/AAA), Section 508 и прочим стандартам и требованиям доступности.
Структурная разметка
Расположение элементов и стили Bootstrap могут применяться в широком спектре видов структуры разметок. Данная документация помогает обеспечить разработчиков лучшими примерами использования Bootstrap и демонстрирует правильную семантику разметки, включая пути разрешения потенциальных проблем с доступностью.
Интерактивные компоненты
Интерактивные компоненты Bootstrap – такие как модальные диалоги, выпадающие меню и стандартные выпадающие подсказки – созданы для работы с тачскрином, мышью и клавиатурой. Эти компоненты должны также быть понятными и доступными людям с ограничениями (такие как экранная «читалка»), для чего используются «роли» и атрибуты WAI-ARIA.
Из-за того, что компоненты Bootstrap созданы как generic (т.е. могут иметь много экземпляров одного класса), разработчикам в их дальнейшей работе может понадобиться включить в проект роли и атрибуты ARIA или скрипты JS для более аккуратного использования точной функциональности такого компонента. Это обычно отмечается в документации.
Контраст цвета
Использование большинства цветов стандартной палитры Bootstrap на светлом бэкграунде (кнопки, вариации отзывов на действия, индикаторы форм валидации) может привести к недостаточному контрасту (смотрите WCAG 2.0 color contrast ratio of 4.5:1). В этом случае для придания контрасту адекватных значений разработчикам потребуется вручную изменить/расширить палитру, существующую по умолчанию.
Спрятанный контент
Контент, который следует скрыть, но оставить доступным, к примеру, для «помощников чтения», может быть создан через класс .sr-only. Это может быть полезным, когда дополнительная информация или псевдоэлемент cue (например, когда значение передается цветом) нужны незрячим пользователям.
<p class="text-danger">
<span class="sr-only">Danger: </span>
This action is not reversible
</p>Для спрятанных элементов интерактивного контроля, таких как «навигационные» ссылки, класс .sr-only можно сочетать с .sr-only-focusable. Это гарантирует, что элемент будет виден после фокусировки (для зрячих).
<a class="sr-only sr-only-focusable" href="#content">Перейти к основному содержанию</a>