達成基準 2.4.6: 見出し及びラベルを理解する

達成基準 2.4.6 見出し及びラベル (レベル AA): 見出し及びラベルは、主題又は目的を説明している。

意図

この達成基準の意図は、ウェブページにどんな情報があるのか、及びその情報がどのように構成されているのかを、利用者が理解するのを手助けすることである。見出しが明快かつ内容が分かるように記述されている場合、利用者は自分の探している情報をより容易に見つけることができ、コンテンツ内の様々な部分間の関係をより容易に理解できる。内容が分かるように記述されているラベルは、利用者がコンテンツ内にある特定のコンポーネントを識別するのに役立つ。

ラベル及び見出しを長くする必要があるわけではない。単語一つ又は一文字だけであっても、コンテンツを見つけてナビゲートする手がかりとして適切であれば、それだけで十分なこともある。

この達成基準は見出しやラベルを必要としない。見出しやラベルが提供されている場合、それらの内容が分かるように記述されていることが求められる。この達成基準は見出し又はラベルとして機能するコンテンツを正しくマークアップすること又は識別することも必要としない。この点は 1.3.1: 情報及び関係性で別途取り扱っている。コンテンツがこの達成基準に合格しながら (見出し又はラベルとして機能する説明的なコンテンツを提供している)、達成基準 1.3.1 (見出し又はラベルを誤ってマークアップ / 識別している場合) に失敗することがありえる。反対に、コンテンツが達成基準 1.3.1 に合格しながら (見出し又はラベルが正しくマークアップ又は識別されている)、この達成基準に失敗することも可能である (それらの見出し又はラベルが十分に明確又は説明的ではない場合)。

さらに、ラベルの場合、この達成基準はフォームコントロール及び入力にアクセシブルな名前を提供する代替手段が用いられているか否かを考慮しない。この点は 4.1.2: 名前 (name)・役割 (role)・値 (value)で別途取り扱っている。コントロール及び入力に適したアクセシブルな名前 (例えば、aria-label="..." を使用して) を持ち、その結果達成基準 4.1.2 に合格したとしても、(ラベルが十分に明確又は説明的ではない場合) この達成基準に失敗する可能性がある。

この達成基準はラベルの使用を求めていない。しかし、ラベルが存在する場合、それらが十分に明確又は説明的でなければならないことは求めている。ラベルの使用の詳細については、3.3.2: ラベル又は説明を参照すること。

メリット

事例

関連リソース

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

達成方法

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

十分な達成方法

  1. G130: 説明的な見出しをつける
  2. G131: 説明的なラベルを提供する
注記

達成基準 1.3.1 により、見出し及びラベルは、プログラムによる解釈がされなければならない。

訳注

上記注記で「見出し及びラベルは、プログラムによる解釈がされなければならない。」と記述されているが、これは達成基準 1.3.1 を正確に反映したものではない。よって、この記述は達成基準 1.3.1 にあるとおり、「見出し及びラベルは、プログラムで決定できるか又はテキストで利用できなければならない。」と解釈するのが妥当と考えられる。w3c/wcag#315 で改善が提案されているので、あわせて参照されたい。

重要な用語

ASCII アート (ASCII art)

文字又はグリフの空間的配置によって作られた図画 (典型的には、ASCII で定義されている 95 の印字可能文字から作られる)。

支援技術 (assistive technology)

障害のある利用者の要件を満たすために、主流のユーザエージェントが提供する機能を超えた機能を提供するような、ユーザエージェントとして動作する、又は主流のユーザエージェントと共に動作するハードウェア及び/又はソフトウェア。

注記

支援技術が提供する機能としては、代替の提示 (例: 合成音声や拡大表示したコンテンツ)、代替入力手法 (例: 音声認識)、付加的なナビゲーション又は位置確認のメカニズム、及びコンテンツ変換 (例: テーブルをよりアクセシブルにするもの) などを挙げることができる。

注記

支援技術は、API を利用、監視することで、主流のユーザエージェントとデータやメッセージのやりとりをすることが多い。

注記

主流のユーザエージェントと支援技術との区別は、絶対的なものではない。多くの主流のユーザエージェントは、障害者を支援する機能を提供している。基本的な差異は、主流のユーザエージェントが障害のある人もない人も含めて、広く多様な利用者を対象にしているのに対し、支援技術は、特定の障害のある利用者という、より狭く限られた人たちを対象にしているということである。支援技術により提供される支援は、対象とする利用者に特化した、よりニーズに適したものである。主流のユーザエージェントは、プログラムオブジェクトからのウェブコンテンツの抽出、マークアップの識別可能な構造への解釈といった、重要な機能を支援技術に対して提供する場合がある。

この文書の文脈において重要な支援技術としては、以下のものが挙げられる:

  • 画面拡大ソフト及びその他の視覚的な表示に関する支援技術。視覚障害、知覚障害、及び読書困難などの障害のある人が、レンダリング後のテキスト及び画像の視覚的な読みやすさを改善するために、テキストのフォント、サイズ、間隔、色、音声との同期などを変更するのに使用している。
  • スクリーンリーダー。全盲の人がテキスト情報を合成音声あるいは点字で読み取るために使用している。
  • 音声変換ソフトウェア。認知障害、言語障害、及び学習障害のある人が、テキストを合成音声に変換するために使用している。
  • 音声認識ソフトウェア。何らかの身体障害のある利用者が使用することがある。
  • 代替キーボード。特定の身体障害のある人がキーボード操作をシミュレートするのに使用している (ヘッドポインタ、シングルスイッチ、呼気・吸気スイッチ、及びその他の特別な入力デバイスを使った代替キーボードを含む)。
  • 代替ポインティングデバイス。特定の身体障害のある人がマウスポインタとボタンの動きをシミュレートするのに使用している。
コンテンツ (content)

コンテンツの構造提示、及びインタラクションを定義するコード又はマークアップも含めて、ユーザエージェントによって利用者に伝達される情報及び感覚的な体験。

自然言語 (human language)

人間とコミュニケーションをとるために話される、書かれる、又は (視覚的もしくは触覚的な手段で) 手話にされる言語。

注記

手話も参照。

ラベル (label)

テキスト、又はテキストによる代替を伴うコンポーネントで、ウェブコンテンツ内のコンポーネントを識別するために利用者に提示されているもの。

注記

名前 (name) は隠されていて、支援技術に対してだけ公開される場合がある一方で、ラベルはすべての利用者に提示される。多くの場合 (すべてではないが)、名前 (name) とラベルは同じである。

注記

ラベルという用語は、HTML における label 要素だけに限定されない。

名前 (name)

ソフトウェアが、ウェブコンテンツのコンポーネントを利用者に識別させることができるテキスト。

注記

ラベルはすべての利用者に提示される一方で、名前 (name) は隠されていて、支援技術に対してだけ明らかにされる場合もある。多くの場合 (すべてではないが)、ラベルと名前 (name) は同じである。

注記

これは、HTML の name 属性とは関係がない。

非テキストコンテンツ (non-text content)

プログラムによる解釈が可能な文字の並びではないコンテンツ、又は文字の並びが自然言語においても何をも表現していないコンテンツ。

注記

これには、 (文字による図画である) ASCII アート、顔文字、 (文字を置き換える) リートスピーク、文字を表現している画像が含まれる。

提示 (presentation)

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

プログラムによる解釈 (programmatically determined)

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

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

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

手話 (sign language)

意味を伝えるために、手と腕の動き、顔の表情又は身体の姿勢の組み合わせを用いる言語。

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

プログラムによる解釈が可能な文字の並びで、自然言語で何かを表現しているもの。

テキストによる代替 (text alternative)

非テキストコンテンツとプログラムで関連付けられるテキスト、又は非テキストコンテンツとプログラムで関連付けられるテキストから参照されるテキスト。プログラムで関連付けられたテキストとは、その場所を、非テキストコンテンツからプログラムによる解釈が可能なテキストである。

チャートの画像があり、その直後の段落にテキストによる説明がある。チャートに対する短いテキストによる代替で後に説明があることを示している。

注記

より詳細な情報は、テキストによる代替を理解する を参照。

ユーザエージェント (user agent)

ウェブコンテンツを取得して利用者に提示するあらゆるソフトウェア。

ウェブコンテンツの取得、レンダリング及びインタラクションを支援する、ウェブブラウザ、メディアプレーヤ、プラグイン、及びその他のプログラム (支援技術も含む)。

ウェブページ (web page)

単一の URI から HTTP で得た埋め込まれていないリソースに加え、レンダリングに使われる、又はユーザエージェントがこのリソースと一緒にレンダリングすることを意図しているその他のあらゆるリソースを合わせたもの。

注記

どのような「その他のリソース」も主たるリソースと一緒にレンダリングされるであろうが、これらのリソースが同時にレンダリングされるとは限らない。

注記

このガイドラインの適合範囲に含まれる対象となるウェブページとみなされるためには、リソースが「埋め込まれていない」リソースでなければならない。

単体のウェブリソースであり、埋め込まれている画像及びメディアのすべてを含んだもの。

Asynchronous JavaScript and XML (AJAX) を用いたウェブメールのプログラム。そのプログラム全体は http://example.com/mail に存在しているが、受信トレイ、連絡先、カレンダーがある。受信トレイ、連絡先、又はカレンダーを表示するリンク又はボタンが提供されているが、全体としてページの URI は変更されない。

カスタマイズ可能なポータルサイトで、利用者が様々なコンテンツモジュールのセットから表示させるコンテンツを選択できるようなもの。

ブラウザで "http://shopping.example.com/" へ行くと、映画のようなインタラクティブなショッピング環境になる。そこでは、視覚的に店内を移動して、店内の棚から商品をドラッグして、目の前にある視覚的な買物カゴに商品を入れる。商品をクリックすると、同時に仕様書が浮き上がるように表示される。これは 1 ページだけのウェブサイトかもしれないし、ウェブサイトの中のほんの 1 ページなのかもしれない。


訳注: このページは、2022 年 9 月 2 日版の Understanding WCAG 2.1 の翻訳です。2022 年 9 月 2 日版の原文は WAIC の管理するレポジトリから入手可能です。