Bootstrap предоставляет простую в использовании структуру готовых стилей, инструментов макета и интерактивных компонентов, позволяющую разработчикам создавать веб-сайты и приложения, которые визуально привлекательны, функционально богаты и доступны прямо из коробки.
Обзор и ограничения
Общая доступность любого проекта, созданного с помощью Bootstrap, во многом зависит от разметки автора, дополнительных стилей и сценариев, которые они включили. Однако при условии, что они были реализованы правильно, должно быть вполне возможно создание веб-сайтов и приложений с помощью Bootstrap, которые соответствуют WCAG 2.0 (A / AA / AAA), раздел 508 и аналогичным стандартам и требованиям доступности.
Структурная разметка
Стиль и макет Bootstrap можно применять к широкому спектру структур разметки. Эта документация направлена на то, чтобы предоставить разработчикам примеры передового опыта, чтобы продемонстрировать использование самого Bootstrap и проиллюстрировать соответствующую семантическую разметку, включая способы решения потенциальных проблем доступности.
Интерактивные компоненты
Интерактивные компоненты Bootstrap, такие как модальные диалоговые окна, раскрывающиеся меню и настраиваемые всплывающие подсказки, предназначены для работы с сенсорным экраном, мышью и клавиатурой. Благодаря использованию соответствующих ролей и атрибутов WAI - ARIA эти компоненты также должны быть понятными и управляемыми с использованием вспомогательных технологий (таких как программы чтения с экрана).
Поскольку компоненты Bootstrap намеренно разработаны как достаточно общие, авторам может потребоваться включить дополнительные роли и атрибуты ARIA , а также поведение JavaScript, чтобы более точно передать точную природу и функциональность своего компонента. Обычно это отмечается в документации.
Цветовой контраст
Большинство цветов, которые в настоящее время составляют палитру Bootstrap по умолчанию - используемые во всей структуре для таких вещей, как варианты кнопок, варианты предупреждений, индикаторы проверки формы - приводят к недостаточному цветовому контрасту (ниже рекомендованного соотношения цветового контраста WCAG 2.0, равного 4,5: 1) при использовании против светлый фон. Авторам потребуется вручную изменить / расширить эти цвета по умолчанию, чтобы обеспечить адекватные соотношения цветового контраста.
Визуально скрытый контент
Контент, который должен быть визуально скрыт, но оставаться доступным для вспомогательных технологий, таких как программы чтения с экрана, можно стилизовать с помощью этого .sr-only класса. Это может быть полезно в ситуациях, когда дополнительная визуальная информация или подсказки (например, значение, обозначенное с помощью цвета) также должны быть переданы невизуальным пользователям.
<p class="text-danger">
<span class="sr-only">Danger: </span>
This action is not reversible
</p>Для визуально скрытых интерактивных элементов управления, таких как традиционные ссылки «пропустить», используйте .sr-only-focusable класс. Это гарантирует, что элемент управления станет видимым после фокусировки (для зрячих пользователей клавиатуры). Будьте осторожны, начиная с Bootstrap 5 .sr-only-focusable класс нельзя использовать в сочетании с .sr-only классом.
<a class="sr-only-focusable" href="#content">Skip to main content</a>Сниженное движение
Bootstrap включает поддержку функции prefers-reduced-motion мультимедиа . В браузерах / средах, которые позволяют пользователю указывать свои предпочтения для уменьшения движения, большинство эффектов перехода CSS в Bootstrap (например, когда открывается или закрывается модальный диалог или скользящая анимация в каруселях) будут отключены.