Доступность
Краткий обзор возможностей и ограничений 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 (например, при открытии или закрытии модального диалога) будут отключены.