Доступність

Короткий огляд функцій і обмежень 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властивості.