Доступность

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

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

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

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

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

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

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

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

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

Поскольку компоненты Bootstrap намеренно разработаны как довольно универсальные, авторам может потребоваться включить дополнительные роли и атрибуты ARIA, а также поведение JavaScript, чтобы более точно передать точную природу и функциональность своего компонента. Это обычно отмечается в документации.

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

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

Визуально скрытый контент

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

<p class="text-danger">
  <span class="visually-hidden">Danger: </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.