Перейти к основному содержанию

Доступность

Краткий обзор возможностей и ограничений 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">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 (например, когда открывается или закрывается модальный диалог или скользящая анимация в каруселях) будут отключены.

Дополнительные ресурсы

Комментарии для сайта Cackle