WCAG 2.2の達成基準「3.2.4 一貫した識別」は、ひとまとまりのWebページ群に同じ機能の部品が繰り返し登場する場合、それらを一貫した方法で識別できるようにすることを求めています。この達成基準はLevel AAです。
簡単に言えば、あるページでは「検索」、別のページでは「探す」と表示されるような不統一を避け、利用者が同じ機能だと予測できる状態にするための基準です。見た目だけでなく、スクリーンリーダーなどの支援技術に伝わる名前も確認します。
「一貫した識別」が求めること
対象になるのは、ボタン、リンク、アイコン付きの操作部品など、利用者が何らかの機能を実行するためのコンポーネントです。同じサイトやサービスの複数ページに同じ機能が現れるなら、見えるラベル、アクセシブルな名前、画像の代替テキストなどを一貫させます。
アクセシブルな名前とは、支援技術がその部品を識別するときに使う名前です。ボタン内の文字、フォームのlabel要素、aria-label属性などから決まります。見た目の文言だけをそろえても、支援技術に別の名前が伝わっていれば、一貫した識別にはなりません。名前、役割、状態を支援技術へ伝える基本は、WCAG 4.1.2「名前、役割、値」の解説も参考になります。
一貫性は「一言一句の完全一致」とは限らない
大切なのは、同じ機能を同じものとして予測できることです。対象に応じて一部の語句が変わっても、命名の規則と機能が一貫していればよい場合があります。一方、見た目が同じでも機能が異なるなら、違いが伝わる名前にする必要があります。
| 状況 | 判断 | 例 |
|---|---|---|
| 同じ機能が複数ページにある | 同じラベルまたは同じ命名規則を使う | 各ページの検索ボタンを「検索」とする |
| 対象だけが変わる同じ機能 | 変化する情報を含めつつ、規則をそろえる | 「次のページ：4」「次のページ：5」 |
| 同じアイコンが異なる機能を表す | 機能に合わせて名前を変える | 「承認済み」と「完了」 |
| 見た目が異なる部品が同じ機能を持つ | 見た目にかかわらず、機能を一貫して識別できるようにする | ヘッダーと本文内の検索機能をともに「検索」とする |
実装の考え方とHTML例
文字が見えるボタンは、その文字を一貫させる
ボタンの文字がそのまま機能を説明しているなら、まず表示文言を統一します。次の例では、ボタン内の「検索」が見えるラベルであり、アクセシブルな名前にもなります。同じ内容のaria-labelを重ねる必要はありません。
<!-- ホームページ -->
<button type="button">検索</button>
<!-- サービスページ -->
<button type="button">検索</button>アイコンだけのボタンには機能名を付ける
文字が表示されないアイコンボタンでは、アイコンの形ではなく、実行する機能が伝わる名前を付けます。ボタン側に名前を付けた場合、内側の画像は重複して読み上げられないよう空のalt属性にします。
<button type="button" aria-label="検索">
<img src="search-icon.svg" alt="">
</button>同じ画像でも機能が違えば名前を分ける
チェックマークの画像が、ある画面では承認状態、別の画面では作業完了を表すなら、どちらも「チェックマーク」とするだけでは意味が伝わりません。形ではなく、その場で表す内容を代替テキストにします。
<!-- 承認状態を示す画像 -->
<img src="check.svg" alt="承認済み">
<!-- 作業完了を示す画像 -->
<img src="check.svg" alt="完了">共通ナビゲーションはテンプレート単位で管理する
ヘッダー、フッター、サイドメニューなどに同じリンクが繰り返される場合は、ページごとに別々の名前を付けず、共通部品として管理すると不統一を防ぎやすくなります。「会社情報」と「会社概要」のような表記揺れが、同じ移動先や同じ機能を示していないか確認します。
よくある失敗と改善方法
同じ機能に異なるラベルを付ける
次の例では、どちらも同じ検索機能なのに、ページによって「検索」と「探す」が使い分けられています。利用者は別の機能なのか判断しなければなりません。
<!-- 改善前 -->
<button type="button">検索</button>
<button type="button">探す</button>
<!-- 改善後 -->
<button type="button">検索</button>
<button type="button">検索</button>見えるラベルと支援技術に伝わる名前が食い違う
表示は「検索」なのにaria-labelが「実行」なら、見て操作する人と音声で操作する人に異なる名前が伝わります。表示文言で十分に機能が分かる場合は、不要なaria-labelを追加せず、HTML本来の名前を利用します。
見た目が同じという理由だけで同じ代替テキストを付ける
基準が求めるのは、画像ファイル名や形の統一ではなく、機能の一貫した識別です。同じチェックマークでも「承認」と「完了」のように機能が異なるなら、それぞれの意味を伝えます。
1ページだけを見て判定する
3.2.4の中心は、複数ページに繰り返される機能の比較です。単一ページで問題が見つからなくても、別のテンプレート、会員ページ、エラー画面、スマートフォン向け表示などで名称が変わっていないか確認します。
テスト方法
- 確認するページ群を決める。 共通ヘッダーを使うページ、購入手続きの各画面、会員機能など、ひとまとまりの範囲を定めます。
- 繰り返される機能を洗い出す。 検索、次へ、戻る、保存、削除、問い合わせなどを一覧にします。
- 実際の機能で分類する。 アイコンの形や配置ではなく、操作後に何が起きるかで同じ機能かどうかを判断します。
- 見えるラベルとアクセシブルな名前を比較する。 HTMLだけでなく、ブラウザのアクセシビリティツリーやスクリーンリーダーでも確認します。
- 例外が妥当か確認する。 名前が違う場合は、機能や対象が本当に異なるためなのか、単なる表記揺れなのかを切り分けます。
- 修正後にページを横断して再確認する。 共通部品の変更が別のページへ影響していないかも確かめます。
アクセシビリティチェックツールは、名前の欠落や一部の実装上の問題を見つける助けになります。ただし、複数ページの部品が同じ機能か、名前の違いが文脈上妥当かという判断まですべて自動化できるとは限りません。ツールの結果と人による確認を組み合わせ、公開後も継続的に見直すことが大切です。試験を運用へ組み込む方法は、Webアクセシビリティの試験・改善・体制づくりでも解説しています。
一貫した識別がもたらすメリット
- 予測しやすくなる：一度覚えた機能を別のページでも見つけやすくなります。
- 認知的な負担を減らせる：名称が変わるたびに意味を推測する必要がなくなります。
- 支援技術でも探しやすくなる：一貫した名前が伝われば、目的の部品を把握しやすくなります。
- 保守しやすくなる：共通の命名規則と部品を使うことで、更新時の表記揺れを抑えられます。
まとめ
WCAG 2.2「3.2.4 一貫した識別」で押さえるべき点は、同じ見た目をそろえることではなく、同じ機能を、複数ページで一貫して理解できるようにすることです。
- 同じ機能には、一貫した見えるラベルとアクセシブルな名前を使う。
- 対象だけが変わる場合は、命名の規則をそろえる。
- 同じアイコンでも機能が異なる場合は、機能に合う名前へ変える。
- 自動チェックだけに頼らず、複数ページを横断して人が確認する。
当社では、Webアクセシビリティの導入と継続的な改善を支援するUUU ウェブアクセシビリティを提供しています。アクセシビリティ向上に取り組みたい方は、サービスの詳細をご覧ください。