WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

F68: 達成基準 4.1.2 の失敗例 - ユーザインタフェース コントロールがプログラム的に解釈される名前(name)を持っていない

達成方法に関する重要な情報

これらの達成方法(参考)の使用法及び、それらがWCAG 2.0 達成基準(規定)とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用(対象)セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用(対象)

HTML のコントロール

これは、次の達成基準に関連する失敗例である:

解説

この失敗例は、フォームコントロールの名前が支援技術に公開されていない場合に発生する問題を説明する。その結果、一部の利用者はフォームコントロールの目的を特定できなくなる。名前(name)は、label 要素を含む複数の方法で指定できる。他のオプションには、アクセシビリティ名に使用されるテキストを直接提供するために使用される title 属性および aria-label の使用、又はその名前(name)を提供しているページ上の他のテキストとの関連を示す aria-labelledby が含まれる。ボタンコントロールには、以下に示すように、別の方法で名前(name)を割り当てることができるが、特定の状況ではlabeltitlearia-label、または aria-labelledby の使用が必要な場合がある。

注記 1: 明示的に関連付けられた label を使用できる要素は次のとおりとなる。

注記 2: 以下の要素については、ラベルを value 属性(サブミット(送信)およびリセット・ボタン)、 alt 属性(画像を用いたボタン)、あるいは要素の内容そのもの(button)でそれぞれ指定するため、label 要素を用いない。

事例

失敗例 1:

以下の例では、視覚的には分かる形でフォームのコントロールに対応するラベルが提示されているが、label要素を用いてラベルとコントロールの対応が示されていない。この例の場合、ユーザエージェント(支援技術を含む)がどのラベルとどのコントロールが対応しているのかを判断できない可能性があるため不適合となる。


 <form>
 姓:
 <input type="text" name="lastname">
 <br>
 名: 
 <input type="text" name="firstname">
 <br />
 私は犬を飼っている <input type="checkbox" name="pet" value="dog">
 私は猫を飼っている <input type="checkbox" name="pet" value="cat">
</form>

失敗例 2:

次のコード例では、 label 要素は存在するが、対応するインプットコントロールとプログラム的に関連付けられていないため、支援技術によって正しく判定されない可能性がある。


<form action="..." method="post">
<p>
<label>
   姓
   <input type="text" name="lastname">
</label>
<label>
   名
   <input type="text" name="firstname">
</label>
</p>
</form>

<form action="..." method="post"> 
<p> 
<label>姓</label> 
<input type="text" name="lastname"> 
<label>名 </label>
<input type="text" name="firstname"> 
</p> 
</form>

失敗例 3:

次のコード例の検索テキストボックスには、プログラムによる解釈が可能な名前がない。名前(name)は、上記の方法のいずれかで提供することができる。


<input type="text" value="検索文字列を入力"><input type="submit" type="submit" value="検索">

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

チェックポイント

ウェブページ内のすべてのinputtextarea 及び select要素("hidden"、"submit"、"reset"、又は "button" の input を除く):

  1. 次のいずれかの方法で、各要素にプログラムによる解釈が可能な名前が付いていることを確認する。

    1. テキストラベル又はラベルは、aria-labelledby 属性(aria-labelledby 属性の値として与えられた各idは、テキストラベル要素の id と一致する)を介して、コントロール要素とプログラムにより関連付けられている。

    2. コントロールは、その aria-label属性の値によってプログラムにより解釈される。

    3. テキストラベルは、ラベルの for 属性(for 属性の値として与えられた idは入力要素の idと一致する)を介して、それぞれの入力要素に正しく関連付けられたラベル要素に含む。

    4. コントロールはラベルテキストも含む label 要素内に含まれる。

    5. コントロールは type が "image" の inputであり、alt 属性はテキストラベルを提供する。

    6. コントロールは title 属性の値によってプログラムにより解釈される。

判定基準