Доступность
Bootstrap следует общепринятым веб-стандартам и, с минимальными дополнительными усилиями, может быть использован для создания сайтов, которые доступны для тех, кто использует AT.
Содержание
Требования к компонентам
Некоторые общие HTML-элементы всегда нуждаются в основных улучшениях доступности с помощью roles и атрибутов Aria. Ниже приведен список некоторых из наиболее часто используемых.
Группы кнопок
Чтобы вспомогательные технологии, такие как скринридеры, передавали, что ряд кнопок сгруппирован, необходимо предоставить соответствующий атрибут role. Для групп кнопок это будет role="group", в то время как панели инструментов должны иметь role="toolbar".
Кроме того, группам и панелям инструментов должна быть присвоена явная метка, поскольку большинство вспомогательных технологий в противном случае не объявят об этом, несмотря на наличие правильного атрибута role. В приведенных здесь примерах мы используем aria-label, но также могут использоваться альтернативы, такие как aria-labelledby.
Пропустить навигацию
Если ваша навигация содержит много ссылок и находится перед основным контентом в DOM, добавьте ссылку Skip to main content перед навигацией (для простоты посмотрите статью A11Y Project article on skip navigation links). Использование класса .sr-only визуально скроет ссылку пропуска, и класс .sr-only-focusable гарантирует, что ссылка станет видимой после фокусировки (для зрячих пользователей клавиатуры).
Из-за давних недостатков/ошибок в Internet Explorer (смотрите эту статью по ссылкам на странице и порядку фокусировки), вам нужно убедиться, что цель вашей ссылки пропуска как минимум программно сфокусирована, добавив tabindex="-1".
Кроме того, вы можете явно запретить отображение видимого фокуса на целевом объекте (особенно в том случае, когда Chrome в настоящее время также устанавливает фокус на элементы с помощью 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">
<!-- The main page content -->
</div>
</body>Дополнительные ресурсы
При вложенных заголовках (<h1> - <h6>), ваш основной заголовок документа должен быть <h1>. Последующие заголовки должны логически использовать <h2> - <h6>, чтобы скринридеры могли создать оглавление для ваших страниц.
Узнайте больше на HTML CodeSniffer и Penn State’s Accessability.