Доступность

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

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

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

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

Общая доступность любого проекта, созданного с помощью Bootstrap, во многом зависит от разметки автора, дополнительных стилей и сценариев, которые они включили. Однако при условии, что они были реализованы правильно, должно быть вполне возможно создавать веб-сайты и приложения с помощью Bootstrap, которые соответствуют WCAG 2.1 (A/AA/AAA), Раздел 508, а также аналогичные стандарты и требования доступности.

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

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

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

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

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

Цветовой контраст

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

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

<p class="text-danger">
  <span class="visually-hidden">Внимание: </span>
  Это действие необратимо
</p>

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

<a class="visually-hidden-focusable" href="#content">Перейти к основному содержанию</a>

Редукция анимаций (уменьшение скорости выполнения)

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

В браузерах, которые поддерживают prefers-reduced-motion, и где пользователь не явно указал, что они предпочитают уменьшение срокости движение (например, где prefers-reduced-motion: no-preference), Bootstrap позволяет плавную прокрутку используя свойство scroll-behavior.