Доступность

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

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

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

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

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

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

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

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

Соотношение контраста цветов

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

Визуально скрытое содержимое

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

<p class="text-danger">
  <span class="visually-hidden">Danger: </span>
  This action is not reversible
</p>

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

<a class="visually-hidden-focusable" href="#content">Skip to main content</a>

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

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

В браузерах, которые поддерживают prefers-reduced-motion, и где пользователь не указал явно, что предпочитает снижение анимации (т.е. где prefers-reduced-motion: no-preference), Bootstrap включает плавную прокрутку с помощью свойства scroll-behavior.

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

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