アクセシビリティ
Bootstrapは一般的なWeb標準に従い、最低限の労力でそれらATを使用するアクセシブルなサイトを作成するために使用されます。(翻訳に自信なし)
ナビゲーションのスキップ
ナビゲーションが多くのリンクを含み、DOM内でメインコンテンツより前に存在する場合、 メインコンテンツへのスキップ機能をそのナビゲーション前に追加してください。 (A11Y Project article on skip navigation linksで簡潔な説明がされているので、参照してみてください。)
.sr-onlyクラスを使用して視覚的にスキップのリンクを隠し、
.sr-only-focusableクラスを使用して、
(点字キーボード(? sighted keyboard)のユーザーのために)フォーカスされるとそのリンクが視覚化されるようにします。
長期にわたるChrome(Issue 262171参照)と、
IE(In-Page Links and Input Focus参照)の不具合/バグのため、
スキップリンクの対象が、少なくともプログラミング的にtabindex="-1"を追加されることで、フォーカス可能であることを保証する必要があります。
加えて、#content:focus { outline: none; }を指定することで、
対象の視覚的なフォーカス指定を、明示的に隠しても良いかもしれません。
(特に最新のChromeは、tabindex="-1"要素でもマウスでクリックされた際にフォーカスをセットします。)
このバグは、キーボードユーザーにとって意味が無いのに使用されているかもしれないページ内の別のリンクにも、 影響を与えてしまうことに注意してください。 同様の間に合わせの修正を、リンク対象として振る舞う他の名前付きアンカーやフラグメント識別子にも追加することを検討しても良いかもしれません。
<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を参照してください。
色のコントラスト
最近では、Bootstrapで利用できるデフォルトカラーの組み合わせの幾つかは、
(様々なスタイルのボタン・クラス、
幾つかの基本のコード・ブロックに使用されるハイライト・カラー、
.bg-primaryのコンテキスト背景のヘルパークラス、
背景が白い場合のデフォルトのリンク色のような)
低いコントラスト比率になっています。(推奨比率の4.5 : 1を下回る)
これは視力の弱い、もしくは色盲のユーザーにとって、問題になるケースがあります。
これらのデフォルトカラーは、彼らにとってもっと見やすくて読みやすいものに修正する必要があるかもしれません。
アクセシビリティに関する追加の情報やツール
docs CC BY 3.0
このページは、ページトップのリンク先のBootstrap公式ドキュメント内のページを翻訳した内容を基に構成されています。 下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。
- 元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
- "訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。