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

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

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

HTML のコントロール

これは達成基準 4.1.2: 名前 (name)・役割 (role)・値 (value) (失敗例) に関する達成方法である。

解説

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

注記/div>

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

  • input
  • textarea
  • select

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

  • 送信及びリセットボタン (input type="submit" 又は input type="reset")
  • 画像を用いたボタン (input type="image")
  • 隠し入力フィールド (input type="hidden")
  • ボタン (button 要素又は <input type="button">)

事例

事例 1

以下の例では、視覚的には分かる形でフォームのコントロールに対応するラベルが提示されているが、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>

事例 2

次のコード例では、 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>

事例 3

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

<input type="text" value="Type your search here"><input type="submit" type="submit" value="Search">

参考リソース

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

検証

手順

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

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

    1. テキストラベル又はラベルは、aria-labelledby 属性 (aria-labelledby 属性の値として与えられた各 id は、テキストラベル要素の id と一致する) を介して、コントロール要素とプログラムにより関連付けられている。
    2. コントロールは、その aria-label 属性の値によってプログラムにより解釈される。
    3. テキストラベルは、ラベルの for 属性 (for 属性の値として与えられた id は入力要素の id と一致する) を介して、それぞれの input 要素に正しく関連付けられた label 要素に含む。
    4. コントロールはラベルテキストも含む 要素内に含まれる。
    5. コントロールは type が image の input であり、alt 属性はテキストラベルを提供する。
    6. コントロールは title 属性の値によってプログラムにより解釈される。

期待される結果

  • 1. の全てのオプションの結果が偽である場合、この失敗条件が適用され、コンテンツは達成基準の失敗となる。