WCAG 2.2 ガイドライン「3.2.4 一貫した識別」Level AA について
はじめに
WCAG 2.2の「3.2.4 一貫した識別」は、ウェブページ群内で同じ機能を持つコンポーネントが、一貫性のある方法で識別されることを求めています。この基準は、ユーザーが混乱することなくウェブサイトを利用できるようにするために重要です。
1. 基準の概要
要件
- 同じ機能を持つボタン、リンク、アイコン、またはその他のUIコンポーネントは、一貫性のあるラベル、名前、または代替テキストで識別される必要があります。
注意点
-
「一貫性」と「同一性」の違い
ラベルや代替テキストが一言一句同じである必要はありませんが、ユーザーが意味や機能を明確に理解できる程度に統一されている必要があります。 -
異なる文脈での使用
同じアイコンや非テキストコンテンツが異なる機能を果たす場合、それぞれの文脈に応じたラベルや代替テキストを提供する必要があります。
2. 実装方法
a. ラベルと名前を統一する
同じ機能を持つボタンやリンクに、すべてのページで同じラベルを使用します。
例: 一貫性のあるラベル
<!-- ホームページ -->
<button aria-label="検索">検索</button>
<!-- サービスページ -->
<button aria-label="検索">検索</button>
b. 一貫した代替テキストを使用する
非テキストコンテンツ（例: アイコン）に対して、同じ機能を果たす場合は一貫した代替テキストを提供します。
例: アイコンの一貫性
<!-- アイコン: 次のページへ -->
<img src="next-arrow.png" alt="次のページへ">
c. 文脈に応じたラベルの適用
同じアイコンが異なる文脈で使用される場合、適切なラベルを変更してユーザーが正確に理解できるようにします。
例: 文脈に応じたラベル
<!-- 承認を示すチェックマーク -->
<img src="check.png" alt="承認済み">
<!-- 完了を示すチェックマーク -->
<img src="check.png" alt="完了">
d. ナビゲーションリンクのラベルを統一
ナビゲーションリンクは、すべてのページで一貫した名前を使用します。
例: ナビゲーションの一貫性
<nav>
<ul>
<li><a href="/home">ホーム</a></li>
<li><a href="/about">会社概要</a></li>
</ul>
</nav>
3. よくある失敗例とその改善策
a. 同じ機能に異なるラベルを使用
失敗例
<!-- ホームページ -->
<button>検索</button>
<!-- サービスページ -->
<button>探す</button>
改善策
<!-- ホームページ -->
<button aria-label="検索">検索</button>
<!-- サービスページ -->
<button aria-label="検索">検索</button>
b. 同じアイコンに同一の代替テキストを使用
失敗例
<!-- 承認済みと完了に同じ代替テキスト -->
<img src="check.png" alt="チェックマーク">
<img src="check.png" alt="チェックマーク">
改善策
<!-- 文脈に応じた代替テキストを適用 -->
<img src="check.png" alt="承認済み">
<img src="check.png" alt="完了">
4. アクセシビリティのメリット
a. ユーザーの混乱を防ぐ
一貫性のある識別方法により、ユーザーは各コンポーネントの機能を直感的に理解できます。
b. 学習の容易さ
同じラベルや代替テキストが繰り返されることで、ユーザーがサイト全体の使用方法を迅速に学べます。
c. 支援技術との互換性
スクリーンリーダーが一貫した情報を提供するため、視覚障害のあるユーザーがより快適に利用できます。
5. テスト方法
a. 手動テスト
- サイト内の複数ページを確認し、同じ機能を持つコンポーネントが一貫したラベルや代替テキストを持っているかチェックします。
b. 自動テストツール
- AxeやWAVEなどのアクセシビリティチェックツールを使用し、ラベルや代替テキストの一貫性を確認します。
まとめ
WCAG 2.2の「3.2.4 一貫した識別」は、同じ機能を持つコンポーネントが一貫した方法で識別されることを保証し、ユーザーにとって予測可能な体験を提供することを目的としています。
実装ポイント
- 同じ機能には一貫したラベルや名前を使用する。
- 文脈に応じて適切なラベルを変更する。
- 非テキストコンテンツに一貫性のある代替テキストを提供する。
これにより、すべてのユーザーが混乱することなくウェブサイトを快適に利用できるようになります。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。