適合レベル
A
※各レベルについては適合レベルとはをご覧ください
概要
CSSを無効にしても、コンテンツが意味の通る順序で表示されるようにHTMLを記述する。
具体的な実装方法
1.3.2 A
1. ⭕️良い例
論理的な順序でソースコードを記述する
- ページのメインコンテンツを先に記述し、その後にナビゲーションや補足情報を記述するなど、コンテンツの論理的な流れに沿ってHTMLを記述します。
<main>
<h1>記事のタイトル</h1>
<p>記事の本文です...</p>
</main>
<aside>
<h2>関連リンク</h2>
<ul>...</ul>
</aside>2. ❌悪い例
レイアウト目的でソースコードの順序を不自然にする
- CSSの
floatやFlexbox、Grid Layoutを使って視覚的な表示順序を整えること自体は問題ありませんが、その結果、ソースコード上の順序が非論理的になるのは問題です。
なぜ問題なのか
- 例えば、メインコンテンツより先に右カラムの広告やメニューをHTMLに記述してしまうと、スクリーンリーダーやキーボードの利用者は、毎回それらを読み飛ばしたり、何度もTabキーを押したりしないとメインコンテンツにたどり着けません。
改善策
- まず、HTMLを論理的な順序で構築します。その上で、CSSの
flex-direction: row-reverseやGridの配置プロパティなどを使い、視覚的な表示順序を調整します。
3.プラットフォーム別の実装
この達成基準は、主にHTMLのソースコードの順序に関するものです。CSSでレイアウトを制御する際に、HTMLの構造が論理的なシーケンスを維持するように実装します。
CSS Flexbox
orderプロパティは視覚的な順序のみを変更し、読み上げやタブの順序は変更しないため、注意して使用する必要があります。
CSS Grid Layout
- Flexboxと同様に、HTMLのDOM構造が論理的なシーケンスを維持するようにし、その上で視覚的な配置を決定します。
4.特殊なケースへの対応
- 独立した情報の配置: ページの主要な流れとは無関係なポートレットや補足情報ボックスなどは、ソースコード上のどこに配置しても、それ自体で意味が通じていれば問題ありません。
確認観点
1.3.2 A
1.定量的な基準の担保
自動チェックツールでの合格
- この達成基準はコンテンツの「意味」を問うため、自動ツールでの完全なチェックは困難です。手動での確認が不可欠です。
チェックリストの達成度:
2.定性的な基準の担保
レビュー
- 開発時に、HTMLの構造が視覚的なレイアウトに依存せず、単体で論理的なストーリーを形成しているかを確認します。特にCSSで複雑なレイアウトを組んでいる箇所は注意が必要です。
専門家による監査
- 専門家は、実際にスクリーンリーダーを使用してページ全体を読み上げさせ、話の文脈がおかしくなったり、順序が入れ替わって意味が通じなくなったりする箇所がないかを確認します。また、CSSを無効化する、キーボードのみで操作するなど、複数の方法でシーケンスの論理性を検証します。