Доступность

Краткий обзор возможностей и ограничений 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>

Редукция анимаций

Bootstrap имеет поддержку медиа-свойства prefers-reduced-motion. В браузерах\средах позволяющее пользователю задать предпочтения в сфере «сокращения движений» (т.е., например, запрет автопроигрывания видео, движения фона на iPhone при разных действиях или визуальных эффектов для людей с нарушениями зрения или вестибулярного аппарата), большинство эффектов переходов в CSS (например, при открытии или закрытии модального диалога) будут отключены. На текущий момент поддержка prefers-reduced-motion ограничена в Safari и macOS\iOS.