Доступность
Краткий обзор возможностей и ограничений Bootstrap для создания доступного контента.
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» для выявления проблем доступности
- Статистика специальных возможностей Майкрософт
- Инструменты тестирования Deque Axe
- Введение в веб-доступность