Обзор 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" class="sr-only sr-only-focusable">Skip to main content</a>
...
<div class="container" id="content" tabindex="-1">
<!-- Основное содержание страницы -->
</div>
</body>
Когда вложенности заголовков (<h1>
- <h6>
), заголовка первичного документа должна быть <h1>
. Последующие заголовки должны делать логическое использование <h2>
- <h6>
такие, что программы чтения с экрана могут построить таблицу содержания ваших страниц.
Узнайте больше о HTML CodeSniffer и Доступность штата Пенсильвания.