Доступность

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

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

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

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

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

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

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

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

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

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

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

Некоторые комбинации цветов, которые в настоящее время составляют палитру 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классами в прошлых версиях, Bootstrap 5 .visually-hidden-focusableявляется автономным классом, и его нельзя использовать в сочетании с .visually-hiddenклассом.

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

Уменьшенное движение

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

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