達成基準 2.5.3: 名前 (name) のラベルを理解する

達成基準 2.5.3 名前 (name) のラベル (レベル A): ユーザインタフェース コンポーネントテキスト又は文字画像を含むラベルを持つ場合、視覚的に提示されたテキストが名前 (name) に含まれている。

ベストプラクティスは、ラベルのテキストを名前の最初に使用することである。

意図

この達成基準の意図は、可視ラベルに依存する障害者が、プログラムでもこのラベルを使用できるようにすることである。多くの場合、コントロールには視認できるテキストのラベルが付けられる。コントロールには、加えて、アクセシブルな名前 (Accessible Name) と呼ばれるプログラムによって利用可能なラベルもある。コントロール上の可視テキストラベルが、アクセシブルな名前 (accessible name) と一致している場合、利用者ははるかにより優れた体験が得られる。

音声入力を行う利用者は、画面に表示されるメニュー、リンク、及びボタンのテキストラベルを読み上げることで、ナビゲートすることができる。音声入力を行う利用者が、目にした可視テキストラベルを読み上げながらも、音声入力コマンドとして有効なアクセシブルな名前 (accessible name) がその可視ラベルと一致していないがために音声入力が正常に機能しない場合、利用者は混乱してしまう。

さらに、コントロールのアクセシブルな名前 (accessible name) が視覚的に隠されている場合、音声入力を行う利用者がたまたま、この隠されたアクセシブルな名前 (accessible name) に対応した語を発話してしまうと、このコントロールを誤って動作させてしまうことがある。

また、テキスト読み上げツールの利用者の場合、聞き取ったテキストが画面に表示されているテキストと一致していることによって、よりよい体験が得られるだろう。

コンテンツ制作者は、リンク又は他のコントロールに文脈を付加して、支援技術の利用者にとってよりわかりやすいものにするために、テキストを追加したくなることがあるだろう。この場合は、アクセシブルな名前 (accessible name) が可視ラベルで始まるように、可視ラベルの後にそのテキストを追加することが推奨される。検索(search)ボタンであれば、アクセシブルな名前 (accessible name) は "search this site" になり、ホーム(home)へのリンクであれば、テキストは "home - go to start page" という具合である。いずれの場合でも、ラベルの隠された部分は異なる手段、例えば、CSS を介してアクセシブルな形で隠されたテキストとして、又は aria-label もしくは aria-labelledby 属性を使用することによって、提供してもよい。

この問題は、音声入力及びテキスト読み上げツールの利用者で、認知の問題も抱える人たちにとって、さらに重要なものとなる。音声入力の利用者にとって、コントロール上に表示される可視ラベルとは異なる音声コマンドを記憶して発話することは、余計な認知負荷となる。また、テキスト読み上げツールの利用者にとって、可視ラベルと一致しない音声出力を吸収して理解することは、余計な認知負荷となる。

メリット

事例

関連リソース

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

達成方法

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

十分な達成方法

参考達成方法

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

  • @@ アイコンに付随するテキストがない場合、アクセシブルな名前 (accessible name) としてそのホバーテキストを用いることを検討する。

失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準の失敗例とみなした、よくある間違いである。

重要な用語

文字画像 (image of text)

特定の視覚的効果を得るために非テキスト形式 (例えば画像) でレンダリングされたテキスト。

注記

テキスト以外の部分が重要な視覚的コンテンツである場合、画像に含まれるテキストは該当しない。

写真に写っている人の名札にある人名。

ラベル (label)

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

注記

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

注記

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

名前 (name)

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

注記

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

注記

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

テキスト (text)

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

ユーザインタフェース コンポーネント (user interface component)

コンテンツの一部分で、特定の機能を実現するための単一のコントロールとして利用者が知覚するもの。

注記

複数のユーザインタフェース コンポーネントが、単一のプログラム要素で実装されることもある。ここでいうコンポーネントは、プログラムの手法と結びついたものではなく、利用者が別々のコントロールとして知覚するものを指す。

注記

ユーザインタフェース コンポーネントには、フォーム要素、リンクだけでなく、スクリプトで生成されるコンポーネントが含まれる。

注記

ここでの「コンポーネント」又は「ユーザインタフェース コンポーネント」は、「ユーザインターフェース要素」とも呼ばれる。

アプレットには、コンテンツ内を行単位、ページ単位、又はランダムアクセスで移動するために用いられる「コントロール」がある。これらには、いずれも名前 (name) を割り当て、個別に設定できるようにする必要があるため、それぞれが「ユーザインタフェース コンポーネント」となる。