Доступність
Короткий огляд функцій і обмежень 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 ), особливо при використанні на світлому фоні. Авторів заохочують перевірити своє конкретне використання кольорів і, якщо необхідно, вручну змінити/розширити ці кольори за замовчуванням, щоб забезпечити адекватне співвідношення кольорів.
Візуально прихований вміст
Вміст, який повинен бути візуально прихований, але залишатися доступним для допоміжних технологій, таких як програми зчитування з екрана, можна стилізувати за допомогою .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
мультимедійної функції . У браузерах/середовищах, які дозволяють користувачеві вказати свої переваги для зменшення руху, більшість ефектів переходу CSS у Bootstrap (наприклад, коли відкривається чи закривається модальне діалогове вікно або ковзаюча анімація в каруселях) буде вимкнено, а значущі анімації ( наприклад спінери) буде сповільнено.
Додаткові ресурси
- Рекомендації щодо доступності веб-контенту (WCAG) 2.1
- Проект A11Y
- Документація зі спеціальних можливостей MDN
- Перевірка доступності Tenon.io
- Аналізатор колірного контрасту (CCA)
- Букмарклет «HTML Codesniffer» для виявлення проблем із доступністю
- Microsoft Accessibility Insights
- Інструменти тестування Deque Axe