WCAG 2.0解説書

本文へジャンプ

-

情報及び関係性:
達成基準 1.3.1 を理解する

1.3.1 情報及び関係性: 何らかの形で提示されている情報、 構造、及び関係性は、プログラムによる解釈が可能である、又はテキストで提供されている。 (レベル A)

この達成基準の意図

この達成基準の意図は、視覚的又は聴覚的な体裁によって暗に伝えられている情報及び関係性を、その表現形式が変わったときにも保つようにすることである。例えば、コンテンツがスクリーンリーダーによって読み上げられたり、コンテンツ制作者が提供するスタイルシートがユーザスタイルシートに置き換えられたりしたときには、表現形式が変わる。

画面を見ている利用者は、様々な視覚的な手がかりによって構造を知覚する。例えば、見出しは大きめで太字のフォントで、次の段落とはスペースを空けて表示されていることがほとんどである。リスト項目は、その先頭に中黒等があって、字下げされていることが多い。段落と段落の間にはスペースがある。共通の特徴を有する条項は、表の行と列で整理されている。フォームの複数のテキストフィールドは、テキストのラベルを共有するグループとして配置されていることがある。異なる背景色を用いて、いくつかのアイテムが互いに関係のあることを示していることもある。特別な意味を持つ語句は、フォントの種類を変えたり、イタリック、下線付きにすることによって示されているなどである。

画面を見ている利用者は、様々な視覚的な手がかりによって構造を知覚する。例えば、見出しは大きめで太字のフォントで、次の段落とはスペースを空けて表示されていることがほとんどである。リスト項目は、その先頭に中黒等があって、字下げされていることが多い。段落と段落の間にはスペースがある。共通の特徴を有する条項は、表の行と列で整理されている。フォームの複数のテキストフィールドは、テキストのラベルを共有するグループとして配置されていることがある。異なる背景色を用いて、いくつかのアイテムが互いに関係のあることを示していることもある。特別な意味を持つ語句は、フォントの種類を変えたり、イタリック、下線付きにすることによって示されている。共通の特徴を有する条項は、同じ行・列を持つセル同士の関係性や、行・列見出しとセルとの関係性が分かるように整理されている。などなど。これらの構造と関係性はプログラムが解釈可能、またはテキストで入手可能であり、すべての利用者にとって重要な情報が感知可能であることを保証する。

同様に、聴覚的な手がかりを用いることもある。例えば、チャイム音が新しい節の開始位置を示している。声のピッチや発話のスピードを変えて、重要な情報を強調したり、引用されたテキストを示したりしている、など。

そういった関係性が、ある利用者にとって知覚可能であれば、その関係性をすべての利用者が知覚できるようにすることが可能である。情報をすべての利用者にきちんと提供できたかどうかを判断する一つの方法は、その情報に様々な感覚モダリティで連続してアクセスしてみることである。

用語集にある用語へのリンクを a 要素(又は、使用している技術特有のリンク要素)を用いて実装して、異なるフォントで示していれば、スクリーンリーダーの利用者は、用語集にある用語のところで、たとえフォントの違いに関する情報は受け取れなかったとしても、それがリンクであることが音声読み上げを聞けば分かるだろう。あるオンラインカタログの価格表示では赤い大きなフォントを使用している。スクリーンリーダーの利用者は赤色の情報は得られないが、価格の前に通貨表示を記載することで情報を得ることができる。

ウェブコンテンツ技術の中には、ある種の情報及び関係性をプログラムで解釈する手段を提供していないものがある。そういった場合には、その情報及び関係性を説明するテキストを提供すべきである。例えば、「アスタリスク (*) のある項目はすべて必須項目です。」のように説明テキストを提供する。テキストによる説明は、例えば、その親要素又は隣接する要素内などのように、(そのページをリニアライズした際に)テキストが説明している情報の近くに置くべきである。

場合によっては、関係性をプログラムで解釈できるようにすべきかテキストで提供すべきか、各自の判断に委ねるしかないこともありうる。しかし、プログラムに基づいた関係性を技術的に示すことができる場合、情報や関係性をテキストで提供するよりも、プログラムが解釈できるようにすることを強く推奨する。

注記: 色の値がプログラムが解釈可能であることは要求していない。色によって伝えられる情報は、その値を明らかにするだけでは、十分に提示することができないからである。そのため、色に特有の問題については、達成基準 1.3.1 ではなく、達成基準 1.4.1で対処している。

達成基準 1.3.1の具体的なメリット:

  • この達成基準は、ユーザエージェントが個々の利用者のニーズに応じてコンテンツに適応できるようにすることによって、様々な障害のある利用者の役に立つ。

  • 全盲の(スクリーンリーダーを使用している)利用者が、色を用いて伝えられている情報をテキストでも得られるようになる(色を用いて情報を伝えている画像の代替テキストを含む)。

  • 点字ピンディスプレイを使用している盲ろうの利用者は、色に依存した情報を利用できないことがある。

達成基準 1.3.1の事例

関連リソース

リソースは、情報提供のみを目的としており、推奨を意味するものではない。

達成基準 1.3.1 の達成方法及び不適合事例 - 情報及び関係性

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

十分な達成方法

使用法: そのコンテンツに合致する状況を以下から選択すること。それぞれの状況には、WCAG ワーキンググループがその状況において十分であると判断する、番号付の達成方法(又は、達成方法の組合せ)がある。

状況 A: ウェブコンテンツ技術が、表現によって伝えている情報及び関係性をプログラムが解釈可能にするセマンテックな構造を提供している場合:

  1. ARIA11: ページの領域を特定するために ARIA ランドマークを使用する (ARIA/英語原文へのリンク)

  2. ARIA12: 見出しを特定するために role=heading を使用する (ARIA/英語原文へのリンク)

  3. ARIA13: 領域とランドマークに名前(name)を付けるために、aria-labelledby を使用する (ARIA/英語原文へのリンク)

  4. ARIA16: ユーザインターフェース コントロールの名前(name)を提供するために、aria-labelledby を使用する (ARIA/英語原文へのリンク)

  5. ARIA17: 関連するフォームコントロールを特定するために、グループ化するロールを使用する (ARIA/英語原文へのリンク)

  6. ARIA20: ページの領域を特定するために region ロールを使用する (ARIA/英語原文へのリンク)

  7. G115: 構造をマークアップするために、セマンティックな要素を使用するかつH49: 強調又は特別なテキストをマークアップするために、セマンティックなマークアップを使用する (HTML)

  8. G117: テキストの表現のバリエーションによって伝えている情報を伝達するために、テキストを使用する

  9. G140: 情報と構造を表現から分離して、異なる表現を可能にする

  10. 次の達成方法を用いて、表現によって伝えられている情報及び関係性をプログラムが解釈できるようにする

状況 B: ウェブコンテンツ技術が、表現によって伝えている情報及び関係性をプログラムが解釈可能にするセマンテックな構造を提供していない場合:

  1. G117: テキストの表現のバリエーションによって伝えている情報を伝達するために、テキストを使用する

  2. FLASH8: フォーム・コントロールのアクセシブルな名前にグループ名を追加する (Flash)

  3. 表現によって伝えられている情報及び関係性をプログラムが解釈可能にする、又は次の達成方法を用いてテキストで入手可能にする:

1.3.1 でさらに対応が望まれる達成方法(参考)

適合するためには必須ではないが、コンテンツをよりアクセシブルにするためには、次の付加的な達成方法もあわせて検討するとよい。ただし、すべての状況において、すべての達成方法が使用可能、または効果的であるとは限らない。

達成基準 1.3.1 のよくある不適合事例

以下に挙げるものは、WCAG ワーキンググループが達成基準1.3.1に適合していないとみなした、よくある不適合事例である。

重要な用語

プログラムによる解釈 (プログラムによる解釈が可能) (programmatically determined (programmatically determinable))

支援技術 を含む様々なユーザエージェントが抽出でき、利用者に様々な感覚モダリティで提示できるような形のデータがコンテンツ制作者によって提供されたとき、そのデータがソフトウェアによって解釈されること。

事例 1: マークアップ言語で、一般に入手可能な支援技術が直接アクセスできる要素と属性から解釈される。

事例 2: 非マークアップ言語の技術特有のデータ構造から解釈され、一般に入手可能な支援技術がサポートするアクセシビリティ API を通じて支援技術に提供される。

提示 (presentation)

利用者が知覚できる形式でコンテンツをレンダリングすること。

構造 (structure)
  1. ウェブページ の各部を相互の関係性によりまとめる方法論。及び、

  2. 一連のウェブページをまとめる方法論。

関係性 (relationships)

コンテンツの異なる部分間における意味のあるつながり。