Sr only bootstrap: Screenreaders · Bootstrap

Доступность. Начало работы · Bootstrap. Версия v4.0.0

• Обзор и ограничения
  • Структурная разметка
  • Интерактивные компоненты
  • Контраст цвета
  • Спрятанный контент
• Дополнительные ресурсы

Краткий обзор возможностей и ограничений 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 (например, когда значение передается цветом) нужны незрячим пользователям.

<p>
  <span>Danger: </span>
  This action is not reversible
</p>

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

<a href="#content">Перейти к основному содержанию</a>

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

• Web Content Accessibility Guidelines (WCAG) 2.0
• The A11Y Project
• MDN accessibility documentation
• Colour Contrast Analyser (CCA)
• “HTML Codesniffer” bookmarklet for identifying accessibility issues

Please enable JavaScript to view the comments powered by Disqus.

Доступность · Bootstrap на русском

Обзор Bootstrap, в том числе, как загрузить и использовать его, некоторые основные шаблоны и примеры, и многое другое.

Bootstrap придерживается общепринятых веб-стандартов и—при минимальных дополнительных усилий—может быть использован для создания сайтов, которые доступны для тех, кто использует AT.

Требования компонента

Некоторые общие элементы HTML всегда нужно для улучшения доступности посредством roleатрибутами S и Ария. Ниже приведен список некоторых из наиболее часто используемых.

Внимание! Как мы идем по альфам, мы будем двигать здесь большую доступность заметок со ссылками на конкретные разделы из других документов.

Группы кнопок

Для того, для вспомогательных технологий, таких как читателей–на экране передать, что ряд кнопок, сгруппирован, соответствующий role атрибут должен быть обеспечен. Для группы кнопок, это будет role="group", в то время как панели инструментов должны иметь role="toolbar".

Кроме того, группы и панели инструментов должны иметь четкие этикетки, как и большинство технологий, иначе не озвучить их, несмотря на наличие правильно role атрибута. В примерах, приведенных здесь, мы используем aria-label, но альтернативы, такие как

aria-labelledby, также можно использовать.

Пропуск навигации

Если ваши навигации содержит множество ссылок и доходит до основного Контента в DOM, добавить Skip to main content ссылка до навигации (для простого объяснения, увидеть это Статья A11Y проект пропустить навигационные ссылки). С помощью .sr-only класс визуально скрывают перейдите по ссылке, и .sr-only-focusable класс будет гарантировать, что ссылка будет видна после целенаправленной (для зрячих пользователей клавиатура).

Благодаря давнему недостатки/ошибки в Internet Explorer (см. в этой статье на ссылки и фокус), вы должны убедиться, что цель вашей ссылке пропустить хотя бы программно фокусируемый, добавив tabindex="-1".

Кроме того, может потребоваться явно подавляет видимый фокусировки на мишени (в частности, хром в настоящее время также устанавливает фокус на элементах с

tabindex="-1" при щелчке мышкой) с #content:focus { outline: none; }.

Обратите внимание, что эта ошибка также влияет на другие ссылки вашего сайта могут использовать, делая их бесполезными для пользователей клавиатуры. Вы можете рассмотреть вопрос о включении аналогичного затычка исправить все другие именованные анкеры / идентификаторы фрагментов, которые выступают в качестве цели ссылки.

<body>
  <a href="#content">Skip to main content</a>
  ...
  <div tabindex="-1">
    <!-- Основное содержание страницы -->
  </div>
</body>

Вложенные заголовки

Когда вложенности заголовков (<h2> — <h6>), заголовка первичного документа должна быть <h2>.

Последующие заголовки должны делать логическое использование <h3> — <h6> такие, что программы чтения с экрана могут построить таблицу содержания ваших страниц.

Узнайте больше о HTML CodeSniffer и Доступность штата Пенсильвания.

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

• “HTML CodeSniffer” букмарклет для выявления проблем доступности
• Проект A11Y
• MDN доступность документации

Специальные возможности · Bootstrap

• Обзор и ограничения
  • Структурная разметка
  • Интерактивные компоненты
  • Цветовой контраст
  • Визуально скрытое содержимое
  • Пониженное движение
• Дополнительные ресурсы

Краткий обзор возможностей и ограничений Bootstrap для создания доступного контента.

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

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

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

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

Стили и макет

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

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

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

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

Поскольку компоненты Bootstrap специально спроектированы так, чтобы быть довольно общими, авторам может потребоваться включить дополнительные роли и атрибуты

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

Цветовой контраст

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

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

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

 <р>
  Опасно: 
  Это действие необратимо
 

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

 Перейти к основному содержанию 

Уменьшенное движение

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

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

• Руководство по обеспечению доступности веб-контента (WCAG) 2.0
• Проект A11Y
• Документация по специальным возможностям MDN
• Средство проверки доступности Tenon.io
• Анализатор цветового контраста (CCA)
• Букмарклет «HTML Codesniffer» для выявления проблем доступности

Специальные возможности · Bootstrap v5.0

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 . Это может быть полезно в ситуациях, когда дополнительную визуальную информацию или подсказки (например, значение, обозначаемое с помощью цвета) также необходимо передать невизуальным пользователям.

 <р>
  Опасно: 
  Это действие необратимо

 

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

 Перейти к основному содержанию
 

Ограниченное движение

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