一貫した識別性:
達成基準 3.2.4 を理解する
この達成基準の意図
この達成基準の意図は、ウェブページ一式で繰り返して表示される機能的なコンポーネントを一貫して識別できるようにすることである。スクリーンリーダーを使用している利用者がウェブサイトを操作する方法は、複数のウェブページで使われている機能に馴染みがあるかどうかに大きく依存している。全く同じ機能が、ウェブページによって異なるラベルを付けられていると、そのウェブサイトはかなり使いづらいものになってしまう。また、認知能力の低下している利用者にとっても、それは混乱のもとであり、認知的負荷を増大させてしまうことがある。そのため、一貫したラベルを付けることが大切である。
この一貫性という考え方は、代替テキストにも当てはまる。アイコン又はその他の非テキストコンテンツが同じ機能であれば、その代替テキストにも同様に一貫性をもたせるべきである。
ウェブページ一式の中で、もしウェブページに 2 つコンポーネントがあり、そのどちらも別のページにあるコンポーネントと同じ機能を持っているのであれば、3 つのコンポーネントは一貫していなければならない。よって、同じページにある 2 つのコンポーネントは一貫していることになる。
1つのウェブページにおいて一貫性を持つことは望ましく、かつ最善の対応策だが、3.2.4 はウェブページ一式において1ページ以上何かが繰り返される場合の一貫性の対処である。
達成基準 3.2.4の具体的なメリット:
サイトのあるページで機能を学習した利用者が、他のページにも同じ機能があれば見つけることができるようになる。
同じ機能を持つコンポーネントを示すために非テキストコンテンツを一貫した方法で用いることで、テキストを読むことや、代替テキストを見つけることが困難な利用者が、代替テキストを頼りにすることなくウェブコンテンツを利用することができるようになる。
代替テキストを頼りにしている利用者が、コンポーネントをより予測できるようになる。別のページでもラベルが一貫していれば、そのコンポーネントを探し出すことができる。
達成基準 3.2.4の事例
事例 1: 文書のアイコン
文書のアイコンを使って、サイト中にある文書のダウンロードを示している。そのアイコンの代替テキストは、どれも「ダウンロード」という単語で始まっていて、その後に文書のタイトルの短縮形が続いている。異なる文書の異なるタイトルを示すために、異なる代替テキストを用いることは、代替テキストを一貫して使用しているとみなされる。
事例 2: チェックマーク
チェックマークのアイコンが、あるページでは「承認済」という意味だが、別のページでは「あり」という意味で使われている。異なる意味で使われているので、代替テキストも異なっている。
事例 3: 他のページへの一貫したリンクのラベル
あるウェブサイトが、オンライン記事を発行している。各記事は複数のウェブページにわたっており、各ページには記事の最初のページ、次のページ、そして前のページへのリンクがある。もし、次のページへのリンクのラベルが、「ページ 2」、「ページ 3」、「ページ 4」などとなっていたとしても、ラベルは同一ではないが、一貫しているといえる。そのため、こういったラベルは、この達成基準の不適合事例ではない。
事例 4: 似たような機能のアイコン
E-コマース・アプリケーションは、プリンタのアイコンを使って、利用者が領収書や請求書を印刷できることを示している。アプリケーションのある部分では、プリンタのアイコンは「領収書を印刷」というラベルが付いていて、領収書を印刷するために使われている。一方で、他の部分では「請求書を印刷」というラベルで、請求書を印刷するために使われている。 ラベルの付け方(…を印刷)は一貫しているが、アイコンの異なる機能を反映してラベルは異なっている。そのため、これはこの達成基準の不適合事例ではない。
事例 5: 保存アイコン
よくある「保存する」アイコンが、サイト中で使われていて、ページを保存する機能が複数のウェブページで提供されている。
事例 6: アイコンと隣接した同じ目的地へのリンク
代替テキストの記載されたアイコン及びテキストリンクが隣接して配置されており、かつリンク先は同じである。最善の対応策は、H2: 隣り合った画像とテキストリンクを同じリンクの中に入れる (HTML) による通り、1つのリンクにグループ化することである。しかし、もし視覚的には上下に配置されているが、ソースでは独立している場合、これは不可能であるかもしれない。この達成基準を満たすには、これら2つのリンクテキストが、同一ではなくとも、一貫していれば良い。しかし、最善の対応策は、利用者が2つ目のリンクに遭遇した時、1つ目のリンクと同じリンク先に行くことが明確であるよう、同一のリンクテキストにすることである。
事例 7 : 不適合事例
あるウェブページにある「検索」ボタンと他のページにある「探す」ボタンは、どちらもテキストフィールドに入力されたキーワードに関するそのウェブサイト上のトピックを一覧表示するためのものである。この場合、ボタンは同じ機能を持っていながら、ラベルに一貫性がない。
関連リソース
リソースは、情報提供のみを目的としており、推奨を意味するものではない。
(今のところ、文書化されていない)
達成基準 3.2.4 の達成方法及び不適合事例 - 一貫した識別性
この節にある番号付の項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組合せを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。他の達成方法についての情報は、達成基準を満たすための達成方法を理解するの「その他の達成方法」を参照のこと。
十分な達成方法
G197: 同じ機能を有するコンテンツに対して、一貫したラベル、識別名及び代替テキストを使用する、かつ、達成基準1.1.1を満たすことのできる達成方法かつ達成基準4.1.2を満たすことのできる達成方法 に従ってラベル、識別名、代替テキストを提供する。
注記 1: 「一貫した」代替テキストは、常に「同一」であるとは限らない。例えば、次のウェブページへリンクするグラフィカルな矢印をウェブページの下部で使うとする。代替テキストは、「4ページに移動」というふうになるだろう。当然ながら、この代替テキストをそのまま次のウェブページでも繰り返して使うのは適切ではない。次のウェブページでは「5ページへ移動」とするのがより適切なはずである。これらの代替テキストは同一ではないが、一貫しており、この達成基準に適合しているといえる。
注記 2: 単一の非テキストコンテンツのアイテムが、異なる機能のために使われることがある。そのような場合、異なる代替テキストが必要であり、用いられるべきである。チェックマーク、?マーク、そして交通標識などのアイコンを使用する際によく見られる例である。それらの機能は、ウェブページの文脈によって異なる可能性がある。チェックマークは、その状況に応じて、「承認済」、「完了」、又は「あり」という意味で使われることがある。すべてのウェブページを通じて、代替テキストを「チェックマーク」としてしまうと、利用者がそのアイコンの意味を理解することができない。同一の非テキストコンテンツが複数の機能を果たしている際は、異なる代替テキストを用いることができる。
3.2.4 でさらに対応が望まれる達成方法(参考)
適合するためには必須ではないが、コンテンツをよりアクセシブルにするためには、次の付加的な達成方法もあわせて検討するとよい。ただし、すべての状況において、すべての達成方法が使用可能、または効果的であるとは限らない。
コンポーネントの機能及びそのコンポーネントを利用者が実行したときに何が起こるかが確実に分かるような代替テキストを用いる(リンク追加予定)
可能な限り、特定の機能を表す非テキストコンテンツは同じものにする(リンク追加予定)
達成基準 3.2.4 のよくある不適合事例
以下に挙げるものは、WCAG ワーキンググループが達成基準3.2.4に適合していないとみなした、よくある不適合事例である。
重要な用語
- ウェブページ (Web page)
単一の URI から HTTP で得た埋め込まれていないリソースに加え、 レンダリングに使われる、又はユーザエージェントがこのリソースと一緒にレンダリングすることを意図しているその他のあらゆるリソースを合わせたもの。
注記 1: どのような「その他のリソース」も主たるリソースと一緒にレンダリングされるであろうが、これらのリソースが同時にレンダリングされるとは限らない。
注記 2: このガイドラインの適合範囲に含まれる対象となるウェブページとみなされるためには、リソースが「埋め込まれていない」リソースでなければならない。
事例 1: すべての埋め込まれている画像とメディアを含んだウェブリソース。
事例 2: Asynchronous JavaScript and XML (AJAX) を用いたウェブメールのプログラム。そのプログラム全体は http://example.com/mail に存在しているが、受信箱、アドレス帳、カレンダーがある。リンクまたはボタンがあり、それを押すと受信箱、アドレス帳やカレンダーを表示するが、ページの URI は全体を通して変わらない。
事例 3: カスタマイズ可能なポータルサイトで、利用者が様々なコンテンツモジュールのセットから表示させるコンテンツを選択できるようなもの。
事例 4: ブラウザで"http://shopping.example.com/" へ行くと、映画のようなインタラクティブなショッピング環境になる。そこでは、視覚的に店内を移動して、店内の棚から商品をドラッグして、目の前にある視覚的な買物カゴに商品を入れる。商品をクリックすると、同時に仕様書が浮き上がるように表示される。これは1ページだけのウェブサイトかもしれないし、 ウェブサイトの中のほんの1ページなのかもしれない。
- 同じ機能 (same functionality)
使うと同じ結果が得られること。
事例: あるウェブページ上にある "search" ボタンと他のウェブページ上にある "find" ボタンは、どちらもキーワードを入力するテキストフィールドがあり、そのウェブサイトにある入力されたキーワードに関係のあるコンテンツをリスト表示する。この場合、同じ機能を有しながらも、ラベルは一貫していないことになる。