Skip to main content

C чего начать

Обзор 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 и Доступность штата Пенсильвания.

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