Доступность

Краткое описание возможностей и ограничений 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 может быть объединён с классом .sr-only-focusable. Это гарантирует, что элемент управления станет видимым при получении фокуса (для пользователей с клавиатурой, которые видят экран).

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

Снижение анимации

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

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

• Руководство по доступности веб-контента (WCAG) 2.0
• Проект A11Y
• Документация по доступности MDN
• Проверка доступности Tenon.io
• Анализатор контрастности цветов (CCA)
• “HTML Codesniffer” закладка для выявления проблем с доступностью