WCAG 2.2 ガイドライン「2.4.8 位置」Level AAA について
はじめに
WCAG 2.2の「2.4.8 位置」では、ユーザーが現在のページがウェブサイト全体のどの位置にあるかを認識できる情報を提供することを求めています。この基準は、サイト内で迷子になることを防ぎ、特定のページへのナビゲーションを容易にすることを目的としています。
1. 基準の概要
要件
- ユーザーがウェブサイト内で現在位置を確認できる情報を提供する。
- この情報はナビゲーションバー、パンくずリスト、またはサイトマップなどで表示される。
2. 実装方法
a. パンくずリストを提供する
パンくずリストは、ユーザーが現在位置を確認できる最も一般的な方法の一つです。
パンくずリストの例
HTML
<nav aria-label="パンくずリスト">
<ol>
<li><a href="/">ホーム</a></li>
<li><a href="/products">製品一覧</a></li>
<li>製品詳細</li>
</ol>
</nav>
- パンくずリストを提供することで、ユーザーは現在のページがサイト全体のどこに位置するかを簡単に把握できます。
b. ナビゲーションバーで現在位置を強調する
ナビゲーションメニュー内で、現在表示中のページを視覚的に目立たせます。
現在位置を強調したナビゲーションバーの例
HTML
<nav>
<ul>
<li><a href="/" class="nav-item">ホーム</a></li>
<li><a href="/about" class="nav-item">会社概要</a></li>
<li><a href="/products" class="nav-item current">製品一覧</a></li>
<li><a href="/contact" class="nav-item">お問い合わせ</a></li>
</ul>
</nav>
CSS
.nav-item.current {
font-weight: bold;
color: #007BFF;
text-decoration: underline;
}
- 視覚的な強調によって、ユーザーが現在地を認識しやすくなります。
c. サイトマップを提供する
サイトマップの例
HTML
<section>
<h2>サイトマップ</h2>
<ul>
<li><a href="/">ホーム</a></li>
<li>
<a href="/products">製品一覧</a>
<ul>
<li><a href="/products/product1">製品1</a></li>
<li><a href="/products/product2">製品2</a></li>
</ul>
</li>
<li><a href="/about">会社概要</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</section>
- サイト全体の構造を明示することで、現在位置をより正確に把握できます。
d. ページタイトルや見出しで現在位置を示す
ページタイトルや最初の見出しに現在のページ名を明記します。
ページタイトルの例
HTML
<head>
<title>製品詳細 - 製品一覧 - ホーム</title>
</head>
見出しの例
HTML
<main>
<h1>製品詳細</h1>
</main>
- ユーザーが現在どのページを閲覧しているかを、すぐに理解できるようにします。
3. よくある失敗例とその改善策
a. 現在位置の情報がない
失敗例
- ナビゲーションメニューに現在のページがどれか示されていない。
- パンくずリストやサイトマップが提供されていない。
改善策
- パンくずリストや視覚的に強調されたナビゲーションを実装する。
b. 現在位置が曖昧
失敗例
- ページタイトルや見出しに具体性がなく、現在位置が明確でない。
改善策
- ページタイトルや見出しにページの内容を具体的に記載する。
<h1>製品詳細 - 製品A</h1>
4. アクセシビリティのメリット
a. サイト内の迷子を防止
- 現在位置を明確に示すことで、ユーザーはサイト内で迷わずに目的のページにたどり着けます。
b. スクリーンリーダーの利便性向上
- パンくずリストや見出しを適切に提供すると、スクリーンリーダーユーザーがサイト構造を把握しやすくなります。
c. ユーザー体験の向上
- 視覚的に現在位置がわかることで、全ユーザーにとって使いやすいサイトになります。
5. テスト方法
a. 手動テスト
- ページ内に現在位置が明示されているか確認。
- ナビゲーションメニューやパンくずリストが正しく機能しているかチェック。
b. スクリーンリーダーテスト
- スクリーンリーダーで、パンくずリストや現在のページが正確に読み上げられるか確認。
c. 自動テストツール
- AxeやWAVEなどを使用して、ナビゲーション要素の適切性を検証。
まとめ
WCAG 2.2の「2.4.8 位置」は、現在のページがサイト全体のどの位置にあるかを示す情報を提供することで、すべてのユーザーがサイトを効率的にナビゲートできるようにすることを目的としています。
実装ポイント
- パンくずリストを提供してサイトの階層構造を明示する。
- ナビゲーションバーで現在位置を視覚的に強調する。
- ページタイトルや見出しで現在位置を示す。
これらを実践することで、ユーザーが使いやすくアクセスしやすいウェブサイトを構築できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。