Краткий обзор возможностей и ограничений Bootstrap для создания доступного контента.
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">Опасность: </span>
Это действие необратимо
</p>
Для визуально скрытых интерактивных элементов управления, таких как традиционные ссылки «пропустить», .sr-only можно объединить с классом .sr-only-focusable. Это гарантирует, что элемент управления станет видимым после фокусировки (для зрячих пользователей клавиатуры).
<a class="sr-only sr-only-focusable" href="#content">Перейти к основному содержанию</a>
Замедленное движение
Bootstrap включает поддержку мультимедийной функции prefers-reduced-motion. В браузерах/средах, которые позволяют пользователю указать свои предпочтения для замедления движения, большинство эффектов перехода CSS в Bootstrap (например, когда открывается или закрывается модальное диалоговое окно или скользящая анимация в каруселях) будут отключены, а значимые анимации ( например, блесны) будут замедляться.