LEARN BY EXAMPLE

3.2.4 一貫した識別性 レベル AA

同じ機能は、前のページで覚えた名前や記号で見つけられるようにする。

概要

同じウェブページ一式で、同じ機能を持つ部品を一貫して識別できるようにします。繰り返し使う検索ボタンや共通リンクなどは、名前やアイコンから、前に使った機能だと分かるようにします。

同じ講座検索を、同じ名前で見つける

PCやスマートフォンで講座サイトを使う場面です。二つのページに繰り返し置かれる、同じ講座検索のボタンを比べます。

利用者が困る例 同じ共通検索の名前が変わる

前に使った検索と同じか確かめ直す。
「検索」と「探す」は同じ講座を検索しますが、共通のボタンの名前が変わっています。

改善した例 表示も読み上げる名前も「検索」

両方に「写真」と入力して「検索」を選ぶと、同じ講座が表示されます。「文章」や、講座名にない語でも試せます。

ページA:講座一覧

講座サイトの共通検索

講座の一覧:2件

  • 写真入門
  • 文章の書き方

ページB:申込方法

講座サイトの共通検索

講座の一覧:2件

  • 写真入門
  • 文章の書き方

覚えた「検索」という名前で、同じ機能を使える。
画面の文字と、支援技術が読み上げるボタンの名前をそろえています。

図:講座サイトの共通検索を異なる名前で示す場合と、一貫した名前で示す場合の比較。問題側は静止図です。改善側では、この図の二つの講座を検索できます。

達成できないと起こる問題の例

認知や学習に障害のある人が、PCやスマートフォンで講座サイトを使い、受けたい講座を検索しています。「講座一覧」の共通検索には「検索」ボタンがありましたが、「申込方法」へ移ると、同じ場所のボタンが「探す」に変わります。

どちらも講座名を入力し、同じ講座一覧から検索する機能です。利用者は、別の種類の検索なのか、前に使ったボタンと同じなのかを確かめ直さなければなりません。スクリーンリーダーが読み上げる名前だけが変わる場合も、利用者は同じ機能かどうか迷います。

達成するための改善例

同じサイトで繰り返す講座検索のボタンを、どのページでも「検索」と表示します。支援技術が読み上げる名前も「検索」にし、見た目の文字と読み上げる名前の両方で、同じ操作だと分かるようにします。

利用者は、前のページで覚えた名前を頼りに、次のページでも講座を検索できます。アイコンで識別する部品がある場合は、アイコンやその代替テキストの一貫性も確かめます。

図の改善側では、二つのページの共通検索を試せます。同じ語を入力して「検索」を選び、どちらも同じ講座を検索することを確認できます。

確認のポイント

  • 複数のページで繰り返し使う部品について、使うと同じ結果が得られるものを確認しましたか。
  • その部品のラベル、読み上げる名前、アイコン、代替テキストから、同じ機能だと分かりますか。
  • 画面に表示する名前が同じでも、支援技術が読み上げる名前だけが変わっていませんか。
  • ページ名や対象に応じて名前が変わる場合も、機能の関係を一貫して理解できますか。
  • 異なる結果を生む操作まで、同じ名前にまとめていませんか。

条件と補足

同じページ一式で繰り返す機能

対象は、共通の目的を持ち、同じ制作者・グループ・組織が作った「ウェブページ一式」です。異なるウェブサイトすべてで、部品の名前を統一するという要件ではありません。

「同じ機能」は、使うと同じ結果が得られることです。共通の検索やアカウント操作など、繰り返し使う部品を確かめます。同じ組織への連絡であっても、フッターの共通リンクと本文中の説明に沿ったリンクを、すべて同じ文字にそろえる必要はありません。繰り返し現れる同じ部品として認識するものかも確認します。

一貫した識別は、一字一句の一致とは限らない

例えば、同じ4ページ目へのリンクを「ページ4」と表示し、5ページ目では「前のページ」と表示する場合です。行き先は同じでも、文脈に合った名前で機能を理解できます。画面の広い表示では「検索」という文字、狭い表示では虫眼鏡のアイコンと「検索」という読み上げる名前を使う方法もあります。

「受講票を印刷」と「領収書を印刷」のように、操作の結果が異なるものまで、同じ名前にまとめる必要はありません。文脈や対象に合う違いと、同じ共通部品の名前が理由なく変わることを区別します。

順序や名前の伝え方に関する基準との違い

共通メニューの順序は3.2.3「一貫したナビゲーション」で確認します。見えるラベルを読み上げる名前に含めることは2.5.3「ラベルを含む名前 (name)」でも確認します。部品の名前をプログラムで取得できるようにすることと、その名前に一貫性を持たせることは、両方を確かめます。

参照資料

テクニックは達成する方法の例です。出典の最終確認: 2026-11-09。講座サイトは、この教材のために作った架空の例です。