Доступность
Краткий обзор возможностей и ограничений Bootstrap для создания доступного контента.
Bootstrap – легкий в использовании фреймворк готовых стилей, инструментов разметки и интерактивных компонентов, позволяющий разработчикам создавать красивые, богатые функционалом и создаваемые за считанные часы приложения и сайты.
Обзор и ограничения
Итоговая доступность и «user-friendliness» проекта на Bootstrap зависит в большой степени от разметки автора, его дополнительных стилей и добавленных им скриптов. Однако, при условии, что все перечисленное работает корректно, созданные на BS4 сайты в идеале должны отвечать WCAG 2.0 (A/AA/AAA), Section 508 и прочим стандартам и требованиям доступности.
Структурная разметка
Расположение элементов и стили Bootstrap могут применяться в широком спектре видов структуры разметок. Данная документация помогает обеспечить разработчиков лучшими примерами использования Bootstrap и демонстрирует правильную семантику разметки, включая пути разрешения потенциальных проблем с доступностью.
Интерактивные компоненты
Интерактивные компоненты Bootstrap – такие как модальные диалоги, выпадающие меню и стандартные выпадающие подсказки – созданы для работы с тачскрином, мышью и клавиатурой. Эти компоненты должны также быть понятными и доступными людям с ограничениями (такие как экранная «читалка»), для чего используются «роли» и атрибуты WAI — ARIA .
Из-за того, что компоненты Bootstrap созданы как generic (т.е. могут иметь много экземпляров одного класса), разработчикам в их дальнейшей работе может понадобиться включить в проект роли и атрибуты ARIA или скрипты JS для более аккуратного использования точной функциональности такого компонента. Это обычно отмечается в документации.
Контраст цвета
Использование большинства цветов стандартной палитры Bootstrap на светлом бэкграунде (кнопки, вариации отзывов на действия, индикаторы форм валидации) может привести к недостаточному контрасту (смотрите WCAG 2.0 color contrast ratio of 4.5:1). В этом случае для придания контрасту адекватных значений разработчикам потребуется вручную изменить/расширить палитру, существующую по умолчанию.
Спрятанный контент
Контент, который следует скрыть, но оставить доступным, к примеру, для «помощников чтения», может быть создан через класс .sr-only . Это может быть полезным, когда дополнительная информация или псевдоэлемент cue (например, когда значение передается цветом) нужны незрячим пользователям.
class="text-danger"> class="sr-only">Danger: This action is not reversible Для спрятанных элементов интерактивного контроля, таких как «навигационные» ссылки, класс .sr-only можно сочетать с .sr-only-focusable . Это гарантирует, что элемент будет виден после фокусировки (для зрячих).
class="sr-only sr-only-focusable" href="#content">Перейти к основному содержанию Дополнительные ресурсы
- Web Content Accessibility Guidelines (WCAG) 2.0
- The A11Y Project
- MDN accessibility documentation
- Colour Contrast Analyser (CCA)
- “HTML Codesniffer” bookmarklet for identifying accessibility issues
ffoodd / improved-sr-only.markdown
Theorically bulletproof CSS class for visually hide anything and keep it accessible to ATs.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| /* |
| Improved screen reader only CSS class |
| @author Gaël Poupard |
| @note Based on Yahoo!’s technique |
| @author Thierry Koblentz |
| @see https://www.cssmojo.com/hide-content-from-sighted-users/ |
| * 1. |
| @note `clip` is deprecated but works everywhere |
| @see https://developer.mozilla.org/en-US/docs/Web/CSS/clip |
| * 2. |
| @note `clip-path` is the future-proof version, but not very well supported yet |
| @see https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path |
| @see http://caniuse.com/#search=clip-path |
| @author Yvain Liechti |
| @see https://twitter.com/ryuran78/status/778943389819604992 |
| * 3. |
| @note preventing text to be condensed |
| author J. Renée Beach |
| @see https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe |
| @note Drupal 8 goes with word-wrap: normal instead |
| @see https://www.drupal.org/node/2045151 |
| @see http://cgit.drupalcode.org/drupal/commit/?id=5b847ea |
| * 4. |
| @note !important is important |
| @note Obviously you wanna hide something |
| @author Harry Roberts |
| @see https://csswizardry.com/2016/05/the-importance-of-important/ |
| */ |
| . sr-only |
| border : 0 !important ; |
| clip : rect ( 1 px , 1 px , 1 px , 1 px ) !important ; /* 1 */ |
| -webkit-clip-path : inset ( 50 % ) !important ; |
| clip-path : inset ( 50 % ) !important ; /* 2 */ |
| height : 1 px !important ; |
| margin : -1 px !important ; |
| overflow : hidden !important ; |
| padding : 0 !important ; |
| position : absolute !important ; |
| width : 1 px !important ; |
| white-space : nowrap !important ; /* 3 */ |
| > |
| /* |
| Use in conjunction with .sr-only to only display content when it’s focused. |
| @note Useful for skip links |
| @see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 |
| @note Based on a HTML5 Boilerplate technique, included in Bootstrap |
| @note Fixed a bug with position: static on iOS 10.0.2 + VoiceOver |
| @author Sylvain Pigeard |
| @see https://github.com/twbs/bootstrap/issues/20732 |
| */ |
| . sr-only-focusable : focus , |
| . sr-only-focusable : active |
| clip : auto !important ; |
| -webkit-clip-path : none !important ; |
| clip-path : none !important ; |
| height : auto !important ; |
| margin : auto !important ; |
| overflow : visible !important ; |
| width : auto !important ; |
| white-space : normal !important ; |
| > |
sukima commented Aug 22, 2022
Are the better examples because it doesn’t fit in the use of a button since a button can handle the same thing using aria-label
button type pl-s">button" aria-label pl-s">Close">×button>
Pretty sure the aria-label will override the text content of a button for screen readers. ��
ffoodd commented Aug 23, 2022
It would indeed, but won’t:
- appear when CSS is disabled for any reason,
- be taken into account when selecting the component,
- translate when using thing like Google Translate…
There might be more arguments, but you got the picture: I really think visually hidden content is better than ARIA attributes — and it also better respects ARIA rules, since we can use HTML & CSS to do this.
Screenreaders
Use screenreader utilities to hide elements on all devices except screen readers.
Hide an element to all devices except screen readers with .sr-only . Combine .sr-only with .sr-only-focusable to show the element again when it’s focused (e.g. by a keyboard-only user). Can also be used as mixins.
class="sr-only sr-only-focusable" href="#content">Skip to main content // Usage as a mixin .skip-navigation @include sr-only; @include sr-only-focusable; >Использование класса sr-only в Bootstrap 3
Часто в коде HTML, использующем Bootstrap 3, можно заметить класс sr-only . На первый взгляд, он может показаться необязательным, ведь его удаление не влияет на внешний вид веб-страницы. Но не стоит спешить с выводами.
Пример его использования может выглядеть так:
Класс sr-only в Bootstrap 3 предназначен для создания контента, который будет доступен только для скринридеров. Скринридеры — это вспомогательные технологии, которые преобразуют текст или данные на экране в звуковой или тактильный формат. Они часто используются людьми с ограничениями зрения для доступа к веб-контенту.
В случае с классом sr-only , текст внутри такого элемента будет доступен для чтения скринридерами, но не будет отображаться на экране. Это позволяет создавать дополнительные описания или подсказки, которые помогут пользователям со скринридерами лучше понять контент.
Например, в приведенном выше примере текст «Toggle Dropdown» будет прочитан скринридером, информируя пользователя о том, что данный кнопка открывает выпадающий список.
Таким образом, класс sr-only играет важную роль в обеспечении доступности веб-страницы и не должен удаляться без основательного понимания его назначения.