【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 達成方法集
この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。
HTML のフォームコントロール及びリンク
これは、次の達成基準に関連する達成方法である:
H91 に関するユーザエージェントサポートノートを参照のこと。
この達成方法の目的は、インタラクティブなユーザインタフェースを構成する要素のキーボード操作及び支援技術との相互運用性を提供するために、標準的な HTML のフォームコントロール及びリンク要素を用いることである。
ユーザエージェントは、HTML のフォームコントロール及びリンクのキーボード操作を提供している。さらに、ユーザエージェントは、フォームコントロール及びリンクを、アクセシビリティ API に結び付けている。支援技術は、アクセシビリティ API を利用して、役割 (role)、識別名 (name)、状態 (state)、値 (value) といった適切なアクセシビリティ情報を抽出し、それらを利用者に提供している。役割は HTML の要素によって提供され、名前はその要素に関連付けられているテキストによって提供される。値及び状態が適切な要素は、複合的なメカニズムを通じて、それらの値及び状態も支援技術に提示している。
必須の属性を通じてテキストがすでにコントロールと関連付けられている場合もある。たとえば、送信ボタンは、button 要素内のテキスト又は画像の「alt」属性を識別名として用いている。フォームコントロールの場合は、label 要素又は「title」属性が用いられる。次の表は、HTML のフォームコントロール及びリンクの役割、識別名、値、状態がどのように決定されるかを示したものである。
| HTML 要素 | 役割 (role) | 識別名 (name) | 値 (value) | 状態 (state) |
|---|---|---|---|---|
| <a> | リンク | <a> 要素の title 属性、画像リンクの場合は alt 属性。テキストと画像の alt 属性を両方が提供されている場合は、両者を結合する。 | href 属性 | |
| <button> | プッシュボタン | <button> 要素内のテキスト又は title 属性 | ||
| <fieldset> | グループ化 | フィールドセット要素にある <legend> 要素内のテキスト | ||
| <input type = "button", "submit", or "reset"> | プッシュボタン | value 属性 | ||
| <input type = "image"> | プッシュボタン | alt 属性又は title 属性 | ||
| <input type = "text"> | 編集可能なテキスト | そのコントロールに関連付けられた <label> 要素又は title 属性 | value 属性 | |
| <input type = "password"> | 編集可能なテキスト | そのコントロールに関連付けられた <label> 要素又は title 属性 | 値は意図的に隠されている | |
| <input type="file"> | 編集可能なテキスト | そのコントロールに関連付けられた <label> 要素又は 'title' 属性 | 'value' 属性 | |
| <input type="checkbox"> | チェックボックス | そのコントロールに関連付けられた <label> 要素又は title 属性 | checked 属性 | |
| <input type="radio"> | ラジオボタン | そのコントロールに関連付けられた <label> 要素又は title 属性 | checked 属性 | |
| <select> | リスト | そのコントロールに関連付けられた <label> 要素又は title 属性 | <option> 要素の selected 属性で「selected」と指定 | |
| <textarea> | 編集可能なテキスト | そのコントロールに関連付けられた <label> 要素又は title 属性 | <textarea> 要素内のテキスト |
ユーザエージェントは、リンクをナビゲートして選択するメカニズムを提供する。次の各事例では、<a href> により、役割 (role) は "link" となる。<a name> は "link" の役割 (role) を提供しないことに注意する。値 (value) は、href 属性の URI である。
事例 1a では、名前 (name) はリンクの中にあるテキストである。この場合は「Example Site」が該当する。
コード例:
<a href="www.example.com">Example Site</a>
リンクの中にある画像に関する事例 1b では、画像の alt 属性が名前 (name) を提供している。例えば、Microsoft Inspect Objects などのように API を閲覧するツールには、alt 属性を可視化できないものもあるが、支援技術では抽出できる。
コード例:
<a href="www.example.com"><img src="example_logo.gif" alt="Example"></a>
事例 1c では、画像の代替テキストとリンクのテキストを連結するときに自動的に空白文字を挿入しない支援技術もある。テキストをスペースなしで連結すべきでない場合、画像と隣接する単語との間にスペースを挿入して、単語が混ざらないようにするのが最も安全である。
コード例:
<a href="www.example.com"><img src="example_logo.gif" alt="Example"> Text</a>
訳注: WAIC では H91-1c に関するアクセシビリティ・サポーテッド（AS）情報を提供している。
2014 年 6 月版のアクセシビリティ・サポーテッド（AS）情報: H91-1c では、「要注意」と評価されている。WAIC はウェブ制作者にこの達成方法が一部の環境では動作しないことに注意を促すものである。
HTML では、ボタンを生成するのにさまざまな方法があるが、それらは全て「プッシュボタン」という役割 (role) に位置付けられる。
事例 2a では、button 要素内の「save」というテキストが名前 (name) となる。値 (value) はない。
コード例:
<button>Save</button>
事例 2b では、value 属性を用いて「Save」「Submit」「Reset」という名前 (name) を指定している。
コード例:
<input type="button" value="Save" />
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
事例 2c では、alt 属性を用いて「save」という名前 (name) を指定している。
コード例:
<input type="image" src="save.gif" alt="save" />
事例 2d では、alt 属性ではなく、title 属性を用いて「save」という名前 (name) を指定している。
コード例:
<input type="image" src="save.gif" title="save" />
事例 2e は、コンテンツ制作者が input 要素の 'alt' 属性と 'title' 属性の両方を指定する場合、ユーザエージェントが名前 (name) をどのように決定するかを明らかにする。この場合、ユーザエージェントは、 'alt' 属性 ("save") を使用して、 'title' 属性を無視する。
コード例:
<input type="image" src="save.gif" alt="save" title="save the file" />
事例 3a では、入力フィールドが「編集可能テキスト」という役割 (role) を持っている。label 要素の for 属性が、input 要素の id 属性を参照することで、label 要素を input 要素と関連付けている。input 要素の名前 (name) は、label 要素で指定した「Type of fruit」となる。値 (value) は、value 属性の「bananas」となる。
コード例:
<label for="text_1">Type of fruit</label>
<input id="text_1" type="text" value="bananas">
事例 3b では、入力フィールドが事例 3a と同じ役割 (role) を持つが、値 (value) がなく、名前 (name) を title 属性で指定している点が異なる。
コード例:
<input id="text_1" type="text" title="Type of fruit">
事例 4 は、input 要素の type 属性から「チェックボックス」という役割 (role) を持っている。label 要素の for 属性が input 要素の id 属性を参照することで、label 要素を input 要素と関連付けている。input 要素の名前 (name) は、label 要素で指定した「Cheese」となる。状態 (state) は checked 属性で「チェックあり」又は「チェックなし」に設定できる。そのコントロールに対する利用者のインタラクションによって、状態 (state) が変更される。
コード例:
<label for="cb_1">Cheese</label>
<input id="cb_1" type="checkbox" checked="checked">
事例 5 は、input 要素の type 属性から「ラジオボタン」という役割 (role) を持っている。input 要素の名前 (name) は、label 要素から与えられる。状態 (state) は、checked 属性によって「チェックあり」又は「チェックなし」に設定できる。状態 (state) は、利用者が変更できる。
コード例:
<input type="radio" name="color" id="r1" checked="checked"/><label for="r1">Red</label>
<input type="radio" name="color" id="r2" /><label for="r2">Blue</label>
<input type="radio" name="color" id="r3" /><label for="r3">Green</label>
事例 6a は、select 要素によって「リストボックス」という役割 (role) を持っている。名前 (name) は「Numbers」で、label 要素から与えられている。select 要素に名前 (name) を付け忘れるのは、よくあるエラーの一つである。値 (value) は、selected 属性 (XHTML では値を "selected" と指定) のある option 要素であり、初期値は「Two」ということになる。
コード例:
<label for="s1">Numbers</label>
<select id="s1" size="1">
<option>One</option>
<option selected="selected">Two</option>
<option>Three</option>
</select>
事例 6b では、事例 6a の select 要素と同じ名前 (name)、役割 (role)、値 (value) であるが、名前 (name) を title 属性で指定している点が異なる。この方法は、ラベルを視覚的に表示しないほうがよい場合に用いることができる。
コード例:
<select id="s1" title="Numbers" size="1">
<option>One</option>
<option selected="selected">Two</option>
<option>Three</option>
</select>
事例 7a は、textarea 要素の「編集可能なテキスト」という役割 (role) を持っている。名前 (name) は、label 要素で指定した「Type your speech here」である。値 (value) は、textarea 要素内にある「Four score and seven years ago」である。
コード例:
<label for="ta_1">Type your speech here</label>
<textarea id="ta_1" >Four score and seven years ago</textarea>
事例 7b は、同じ役割 (role) を持ち、名前 (name) は title 属性を用いて指定していて、値 (value) は空である。
コード例:
<textarea id="ta_1" title="Type your speech here" >Four score and seven years ago</textarea>
事例 8 のラジオボタンのフィールドセットには「グループ化」という役割 (role) がある。名前 (name) は legend 要素によって与えられている。
コード例:
<fieldset>
<legend>Choose a Color:</legend>
<input id="red" type="radio" name="color" value="red" /><label for="red">Red</label><br />
<input id="blue" type="radio" name="color" value="blue" /><label for="blue">Blue</label><br />
<input id="green" type="radio" name="color" value="green" /><label for="green">Green</label>
</fieldset>
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
HTML のソースコードを調べる。
リンク及びフォーム要素に対して、上記の表で示されているように、名前 (name)、値 (value)、状態 (state) が指定されていることを確認する。
上記 2. の結果が真である。
この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。