Доступность

Краткий обзор возможностей и ограничений 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">Опасность: </span>
  Это действие необратимо
</p>

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