WCAG 2.2 ガイドライン「3.2.3 一貫したナビゲーション」Level AA について
はじめに
WCAG 2.2の「3.2.3 一貫したナビゲーション」は、ウェブサイト内で繰り返し表示されるナビゲーションメカニズムが、常に同じ順序で表示されることを求めています。この基準は、ユーザーがウェブページ間を効率的かつ予測可能に移動できるようにするために重要です。
1. 基準の概要
要件
- 複数のページで繰り返されるナビゲーション要素が、常に同じ相対的な順序で表示される必要があります。
- この基準は、ユーザーが意図的に変更を加えた場合を除き、一貫性を維持することを求めます。
2. 実装方法
a. ナビゲーションメニューの順序を固定する
ウェブサイト全体でナビゲーションメニューの順序を統一します。
例: 一貫性のあるナビゲーションメニュー
<nav>
<ul>
<li><a href="/home">ホーム</a></li>
<li><a href="/about">会社概要</a></li>
<li><a href="/services">サービス</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>
b. ユーザーが意図的にカスタマイズした場合を考慮
ユーザーがナビゲーションの順序をカスタマイズできる場合は、その変更を適切に保存します。
例: ユーザーによるカスタマイズの保存
- 機能: ユーザーがナビゲーション項目の順序を変更。
- 実装: Cookieやローカルストレージを使用して、カスタマイズ結果を保存。
function saveNavigationOrder(newOrder) {
localStorage.setItem('navigationOrder', JSON.stringify(newOrder));
}
c. ナビゲーションの相対順序を意識する
ヘッダー、ナビゲーション、フッターなど、ページ構成要素の配置を統一します。
例: ページ構造の統一
<header>
<h1>サイト名</h1>
</header>
<nav>
<ul>
<li><a href="/home">ホーム</a></li>
<li><a href="/about">会社概要</a></li>
</ul>
</nav>
<main>
<p>ここにページ内容が表示されます。</p>
</main>
<footer>
<p>著作権情報</p>
</footer>
3. よくある失敗例とその改善策
a. ページ間でナビゲーションの順序が異なる
失敗例
<!-- ホームページ -->
<nav>
<ul>
<li><a href="/home">ホーム</a></li>
<li><a href="/about">会社概要</a></li>
</ul>
</nav>
<!-- サービスページ -->
<nav>
<ul>
<li><a href="/about">会社概要</a></li>
<li><a href="/home">ホーム</a></li>
</ul>
</nav>
問題点
- ユーザーがナビゲーションメニューの順序に混乱する可能性があります。
改善策
<!-- 全ページで統一 -->
<nav>
<ul>
<li><a href="/home">ホーム</a></li>
<li><a href="/about">会社概要</a></li>
</ul>
</nav>
b. 意図しない順序変更
失敗例
- ウェブページの更新時にナビゲーションの順序が意図せず変更される。
改善策
- ナビゲーションの順序を一元管理し、全ページで統一。
4. アクセシビリティのメリット
a. ユーザー体験の向上
- ナビゲーションが一貫していると、ユーザーはウェブサイト内を効率的に移動できます。
b. 支援技術との互換性
- スクリーンリーダーを使用するユーザーにとって、一貫したナビゲーションは予測可能性を高めます。
c. 学習の容易さ
- 繰り返し表示される要素の配置が同じであることで、ユーザーはサイトの構造を素早く学習できます。
5. テスト方法
a. 手動テスト
- サイト内の複数ページを比較し、ナビゲーションの順序が一貫しているか確認します。
- カスタマイズ可能なナビゲーションの場合、変更内容が適切に保存され、反映されているか確認します。
b. 自動テストツール
- AxeやWAVEなどを使用して、ナビゲーション要素の構造が統一されているかチェックします。
まとめ
WCAG 2.2の「3.2.3 一貫したナビゲーション」は、ウェブサイト内で繰り返されるナビゲーションメカニズムが予測可能な順序で表示されることを保証し、ユーザーが快適にサイトを利用できるようにすることを目的としています。
実装ポイント
- ナビゲーションメニューの順序を統一する。
- ヘッダーやフッターなど、構造要素の配置を固定する。
- ユーザーのカスタマイズを適切に保存し、反映する。
これにより、すべてのユーザーが一貫性のある快適な操作体験を得ることができます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。