Доступность

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

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

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

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

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

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

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

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

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

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

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

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

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

<p class="text-danger">
  <span class="sr-only">Опасность: </span>
  Это действие необратимо
</p>

Для визуально скрытых интерактивных элементов управления, таких как традиционные ссылки «пропустить», .sr-only можно объединить с классом .sr-only-focusable. Это гарантирует, что элемент управления станет видимым после фокусировки (для зрячих пользователей клавиатуры).

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

Замедленное движение

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