【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集
この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。
HTML のコントロール
これは、次の達成基準に関連する失敗例である:
この失敗例は、フォームコントロールの名前が支援技術に公開されていない場合に発生する問題を説明する。その結果、一部の利用者はフォームコントロールの目的を特定できなくなる。名前 (name) は、label
要素を含む複数の方法で指定できる。他のオプションには、アクセシビリティ名に使用されるテキストを直接提供するために使用される title
属性および aria-label
の使用、又はその名前 (name) を提供しているページ上の他のテキストとの関連を示す aria-labelledby
が含まれる。ボタンコントロールには、以下に示すように、別の方法で名前 (name) を割り当てることができるが、特定の状況では label
、title
、aria-label
、または aria-labelledby
の使用が必要な場合がある。
注記 1:
明示的に関連付けられた label
を使用できる要素は次のとおりとなる。
input
textarea
select
注記 2:
以下の要素については、ラベルを value
属性 (送信及びリセットボタン)、 alt
属性 (画像を用いたボタン)、あるいは要素の内容そのもの (button
) でそれぞれ指定するため、label
要素を用いない。
送信及びリセットボタン (input type="submit"
又は input type="reset"
)
画像を用いたボタン (input type="image"
)
隠し入力フィールド (input type="hidden"
)
ボタン (button
要素又は <input type="button">
)
以下の例では、視覚的には分かる形でフォームのコントロールに対応するラベルが提示されているが、label
要素を用いてラベルとコントロールの対応が示されていない。この例の場合、ユーザエージェント (支援技術を含む) がどのラベルとどのコントロールが対応しているのかを判断できない可能性があるため失敗例となる。
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
<br>
I have a dog <input type="checkbox" name="pet" value="dog">
I have a cat <input type="checkbox" name="pet" value="cat">
</form>
次のコード例では、 label
要素は存在するが、対応するインプットコントロールとプログラム的に関連付けられていないため、支援技術によって正しく判定されない可能性がある。
<form action="..." method="post">
<p>
<label>First Name</label>
<input type="text" name="firstname">
<label>Last Name</label>
<input type="text" name="lastname">
</p>
</form>
次のコード例の検索テキストボックスには、プログラムによる解釈が可能な名前がない。名前 (name) は、上記の方法のいずれかで提供することができる。
<input type="text" value="Type your search here"><input type="submit" type="submit" value="Search">
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
ウェブページ内のすべての input
、textarea
及び select
要素 ("hidden"、"submit"、"reset"、又は "button" の input を除く):
次のいずれかの方法で、各要素にプログラムによる解釈が可能な名前が付いていることを確認する。
テキストラベル又はラベルは、aria-labelledby
属性 (aria-labelledby
属性の値として与えられた各 id は、テキストラベル要素の id
と一致する) を介して、コントロール要素とプログラムにより関連付けられている。
コントロールは、その aria-label
属性の値によってプログラムにより解釈される。
テキストラベルは、ラベルの for
属性 (for
属性の値として与えられた id
は入力要素の id
と一致する) を介して、それぞれの入力要素に正しく関連付けられたラベル要素に含む。
コントロールはラベルテキストも含む label
要素内に含まれる。
コントロールは type
が "image" の input
であり、alt
属性はテキストラベルを提供する。
コントロールは title
属性の値によってプログラムにより解釈される。
1. の全てのオプションの結果が偽である場合、この失敗条件が適用され、コンテンツは達成基準の失敗となる。