WCAG 2.2 ガイドライン「1.3.2 意味のある順序」Level A について
はじめに
WCAG 2.2の「1.3.2 意味のある順序」は、コンテンツの意味に影響を与える順序が正しくプログラムで認識できるようにすることを求めています。この基準は、スクリーンリーダーなどの支援技術を利用するユーザーがコンテンツを正しい順序で理解できるようにするために重要です。
この記事では、HTML、CSS、JavaScriptを学び始めた方にもわかりやすいように、具体例や実装方法を交えてガイドラインの内容を詳しく解説します。
1. 意味のある順序とは？
ウェブコンテンツは、以下のような状況で順序が意味を持つ場合があります：
- 段落や見出しの順序
例: 「はじめに」→「詳細な説明」→「結論」の順序でコンテンツを表示。 - 手順や番号付きリスト
例: 「ステップ1」→「ステップ2」→「ステップ3」の順序で操作説明を提供。 - フォームの入力順序
ユーザーが正しい順序でフォームを入力できるようにする。
支援技術が利用者にコンテンツを正しい順序で提示するためには、DOM（Document Object Model）上の順序が視覚的な順序と一致している必要があります。
2. ガイドラインの要件と実装方法
a. DOM順序を視覚順序に合わせる
DOMの順序が視覚的な順序と一致していることが基本です。
視覚的なレイアウトをCSSで制御し、HTMLの構造は論理的に正しい順序で記述します。
不適切な例
<div style="order: 2;">ステップ2</div>
<div style="order: 1;">ステップ1</div>
- CSSの
orderで順序を変更しているため、スクリーンリーダーが読み上げる順序と視覚的な順序が異なります。
改善例
<div>ステップ1</div>
<div>ステップ2</div>
- HTMLの構造を論理的な順序にし、CSSで見た目を調整します。
b. リストやテーブルを適切にマークアップする
リストやテーブルを適切に使用し、順序や関連性がわかるようにします。
リストの場合
HTMLの例
<h2>手順</h2>
<ol>
<li>フォームに入力します。</li>
<li>内容を確認します。</li>
<li>送信ボタンをクリックします。</li>
</ol>
テーブルの場合
HTMLの例
<table>
<thead>
<tr>
<th>日付</th>
<th>イベント</th>
</tr>
</thead>
<tbody>
<tr>
<td>2024年1月1日</td>
<td>新年のイベント</td>
</tr>
<tr>
<td>2024年2月14日</td>
<td>バレンタインデー</td>
</tr>
</tbody>
</table>
c. フォームの入力順序を正しく設定する
フォームの入力順序を論理的にし、tabindexを適切に使用します。
HTMLの例
<form>
<label for="name">名前：</label>
<input type="text" id="name" name="name" tabindex="1">
<label for="email">メール：</label>
<input type="email" id="email" name="email" tabindex="2">
<button type="submit" tabindex="3">送信</button>
</form>
3. よくある失敗例とその対策
a. 視覚順序とDOM順序の不一致
失敗例
<div>ステップ3</div>
<div>ステップ1</div>
<div>ステップ2</div>
- DOM順序が視覚的な順序と一致していないため、スクリーンリーダーで正しい順序が伝わりません。
改善策
<div>ステップ1</div>
<div>ステップ2</div>
<div>ステップ3</div>
b. 空白文字を使ったレイアウト
空白文字で表現されたレイアウトは、スクリーンリーダーが正しく読み上げられません。
失敗例
<p>列1 列2 列3</p>
改善策
<table>
<tr>
<td>列1</td>
<td>列2</td>
<td>列3</td>
</tr>
</table>
4. アクセシビリティ向上のための注意点
- コンテンツ順序を意識する
コンテンツの意味を考慮し、論理的な順序でHTMLを記述します。 - CSSを正しく活用する
レイアウトや視覚的なデザインはCSSで調整し、HTMLは情報の順序を正確に伝える役割を持たせます。 - 支援技術での動作を確認する
スクリーンリーダーを使用し、コンテンツが意図した順序で読み上げられるかをテストします。
5. アクセシビリティのメリット
このガイドラインを守ることで、以下のようなユーザーに配慮できます：
- スクリーンリーダーユーザー：正しい順序で情報が読み上げられ、コンテンツを理解しやすくなります。
- 認知障害を持つユーザー：論理的で整理された情報により、混乱を避けられます。
まとめ
WCAG 2.2の「1.3.2 意味のある順序」は、コンテンツの順序が意味を持つ場合に正しくプログラムで認識可能にすることを求めています。
- HTML構造を論理的に記述し、CSSで視覚的な調整を行う。
- リストやテーブル、フォームなどで適切なマークアップを使用する。
初心者でもこのガイドラインを意識することで、支援技術を利用するユーザーに配慮したウェブコンテンツを作成できます！
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。