解説書 達成基準 3.2.4:一貫した識別性 (レベル AA)

要約

目標

ページ間での動作をより予測可能にする。

何をすればよいか

繰り返される機能を一貫して識別する。

なぜそれが重要か

一貫して識別される動作は、障害のある人にとって特に重要である。

意図

この達成基準の意図は、ウェブページ一式で繰り返して表示される機能的なコンポーネントを一貫して識別できるようにすることである。ウェブサイトを操作する際にスクリーンリーダーを使用している利用者は、複数のウェブページで使われている機能に馴染みがあるかどうかに大きく依存している。全く同じ機能が、複数のウェブページ毎に異なるラベル (又は、より一般的には、異なる アクセシブルな名前 (accessible name)) を付けられている場合、そのウェブサイトはかなり使いづらいものになってしまう。それは、認知的限界のある人々に混乱をもたらし、認知的負荷を増大させてしまうことがある。したがって、一貫したラベルが役立つ。

この一貫性は、テキストによる代替にも及ぶ。アイコン又はその他の非テキスト項目が同じ機能を持つ場合、そのテキストによる代替も同様に一貫性をもたせるべきである。

ウェブページ一式の中で、あるウェブページに二つのコンポーネントがあり、その両方が別のページ上の一つのコンポーネントと同じ機能を持つ場合、三つのコンポーネント全てが一貫していなければならない。したがって、同じページ上の二つのコンポーネントは一貫していることになる。

一つのウェブページにおいて一貫性を持つことは望ましく、かつ最善の対応策だが、3.2.4 はウェブページ一式において 1 ページ以上何かが繰り返される場合の一貫性の対処である。

利点

• あるサイトのあるページで機能を学習した人は、それらが存在する場合、他のページで目的の機能を見つけることができる。
• 非テキストコンテンツが同じ機能を持つコンポーネントを特定するために一貫した方法で使用されている場合、テキストを読むことや、テキストによる代替を見つけることが困難な人は、テキストによる代替を頼りにすることなくウェブとやり取りができる。
• テキストによる代替を頼りにしている人は、より予測可能な体験ができるようになる。異なるページに一貫したラベルがある場合、そのコンポーネントを検索することもできる。

事例

事例 1: 文書のアイコン

文書のアイコンは、サイトの至る所で文書のダウンロードを示すために使用される。そのアイコンのテキストによる代替は、どれも「ダウンロード」という単語で始まっていて、その後に文書のタイトルの短縮形が続いている。異なる文書の異なるタイトルを示すために異なるテキストによる代替を用いることは、テキストによる代替の一貫した使用である。

事例 2: チェックマーク

チェックマークのアイコンは、あるページでは「承認済」として機能しているが、別のページでは「あり」として機能している。異なる意味で使われているので、異なるテキストによる代替を持っている。

事例 3: 他のページへの一貫したリンクのラベル

あるウェブサイトが、オンライン記事を発行している。各記事は複数のウェブページにわたっており、各ページには記事の最初のページ、次のページ、そして前のページへのリンクがある。もし、次のページへのリンクのラベルが、「ページ 2」、「ページ 3」、「ページ 4」などとなっていたとしても、ラベルは同一ではないが、一貫しているといえる。そのため、こういったラベルは、この達成基準の失敗例ではない。

事例 4: 似たような機能のアイコン

e コマース アプリケーションは、利用者が領収書又は請求書を印刷できること許可するプリンタのアイコンを使用している。アプリケーションのある部分では、プリンタのアイコンに「領収書を印刷」のラベルが付けられ、領収書を印刷するために使われており、さらに、他の部分に「請求書を印刷」のラベルが付けられ、請求書を印刷するために使われている。ラベルの付け方 (…を印刷) は一貫しているが、ラベルはアイコンの異なる機能を反映するために異なっている。そのため、この例はこの達成基準の不適合事例ではない。

事例 5: 保存アイコン

共通の「保存」アイコンは、複数のウェブページにページ保存機能が提供されているサイトから使用される。

事例 6: アイコンと隣接した同じ目的地へのリンク

代替テキストの記載されたアイコン及びテキストリンクが隣接して配置されており、かつリンク先は同じである。最善の対応策は、 H2: Combining adjacent image and text links for the same resource による通り、一つのリンクにグループ化することである。しかし、もし視覚的には上下に配置されているが、ソースでは独立している場合、これは不可能であるかもしれない。この達成基準を満たすには、これら二つのリンクテキストが、同一ではなくとも、一貫していれば良い。しかし、最善の対応策は、利用者が二つ目のリンクに遭遇した時、一つ目のリンクと同じリンク先に行くことが明確であるよう、同一のリンクテキストにすることである。

事例 7: 失敗例

あるウェブページにある「検索」ボタンと他のページにある「探す」ボタンは、どちらも用語を入力するためのフィールドがあり、送信された用語に関連するウェブサイト内のトピックを一覧表示する。この場合、ボタンは同じ機能を持っているが、ラベルに一貫性がない。

事例 8: 主に支援技術の利用者に影響を与える失敗例

同じ機能を持つ二つのボタンは、視覚的には同じテキストであるが、aria-label="..." により異なるアクセシブルな名前 (accessible name) が付けられている。支援技術の利用者の場合、これら二つのボタンは異なる方法で一貫性のない方法で通知される。

テクニック

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断するテクニック、又は複数のテクニックの組み合わせを表している。しかしながら、必ずしもこれらのテクニックを用いる必要はない。その他のテクニックについての詳細は、WCAG 達成基準のテクニックを理解するの「その他のテクニック」を参照のこと。