Доступность

Краткий обзор возможностей и ограничений Bootstrap для создания доступного контента.

На этой странице

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

Обзор и ограничения

Итоговая доступность и «user-friendliness» проекта на Bootstrap зависит в большой степени от разметки автора, его дополнительных стилей и добавленных им скриптов. Однако, при условии, что все перечисленное работает корректно, созданные на Bootstrap сайты в идеале должны отвечать WCAG 2.0 (A/AA/AAA), Section 508 и прочим стандартам и требованиям доступности.

Структурная разметка

Расположение элементов и стили Bootstrap могут применяться в широком спектре видов структуры разметок. Данная документация помогает обеспечить разработчиков лучшими примерами использования Bootstrap и демонстрирует правильную семантику разметки, включая пути разрешения потенциальных проблем с доступностью.

Интерактивные компоненты

Интерактивные компоненты Bootstrap – такие как модальные диалоги, выпадающие меню и стандартные выпадающие подсказки – созданы для работы с тачскрином, мышью и клавиатурой. Эти компоненты должны также быть понятными и доступными людям с ограничениями (такие как экранная «читалка»), для чего используются «роли» и атрибуты WAI-ARIA.

Из-за того, что компоненты Bootstrap созданы как generic (т.е. могут иметь много экземпляров одного класса), разработчикам в их дальнейшей работе может понадобиться включить в проект роли и атрибуты ARIA или скрипты JS для более аккуратного использования точной функциональности такого компонента. Это обычно отмечается в документации.

Контраст цвета

Использование большинства цветов стандартной палитры Bootstrap на светлом бэкграунде (кнопки, вариации отзывов на действия, индикаторы форм валидации) может привести к недостаточному контрасту (смотрите Коэффициент контрастности цвета текста WCAG 2.1 4.5: 1 и Коэффициент контрастности нетекстовых цветов WCAG 2.1 3: 1), особенно при использовании на светлом фоне. В этом случае для придания контрасту адекватных значений разработчикам потребуется вручную изменить/расширить палитру, существующую по умолчанию.

Контент, который следует скрыть, но оставить доступным для вспомогательных технологий, таких как программы чтения с экрана, можно стилизовать с помощью класса .visually-hidden. Это может быть полезно в ситуациях, когда дополнительная визуальная информация или подсказки (например, значение, обозначенное с помощью цвета) нужны незрячим пользователям.

<p class="text-danger">
  <span class="visually-hidden">Danger: </span>
  This action is not reversible
</p>

Для визуально скрытых интерактивных элементов управления, таких как традиционные ссылки “пропустить”, используйте класс .visually-hidden-focusable. Это гарантирует, что элемент управления станет видимым после фокусировки (для зрячих пользователей при работе с клавиатурой). Будьте осторожны, по сравнению с равнозначными классами .sr-only и .sr-only-focusable в прошлых версиях .visually-hidden-focusable из Bootstrap 5 является автономным классом, и его нельзя использовать в сочетании с классом .visually-hidden.

<a class="visually-hidden-focusable" href="#content">Skip to main content</a>

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

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