表示サンプル: このページの修正箇所は次のように表示されます。
HTMLのフォーム・コントロール及びリンク
これは、次の達成基準に関連する実装方法である:
この実装方法の目的は、インタラクティブなユーザーインターフェイスを構成する要素のキーボード操作及び支援技術との相互運用性を提供するために、標準的な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="checkbox"> | チェックボックス | そのコントロールに関連付けられた<label> 要素又はtitle 属性 | checked 属性 | |
<input type="radio"> | ラジオボタン | そのコントロールに関連付けられた<label> 要素又はtitle 属性 | checked 属性 | |
<select> | コンボボックス、リスト、又はドロップダウンリスト | そのコントロールに関連付けられた<label> 要素又はtitle 属性 | <option> 要素のselected 属性で「selected 」と指定 | |
<textarea> | 編集可能なテキスト | そのコントロールに関連付けられた<label> 要素又はtitle 属性 | <textarea> 要素内のテキスト |
ユーザーエージェントは、リンクに移動したり、リンクを選択するメカニズムを提供する。次の各事例では、「リンク」という役割(Role)が<a href>で与えられている。<a name>は「リンク」という役割を与えない点に注意しよう。値(Value)に該当するのは、href
属性のURIである。
事例 1aでは、識別名はリンクの中にあるテキストである。この場合は「サイト例」が該当する。
コード例:
<a href="www.example.com">サイト例</a>
リンクの中にある画像に関する事例 1bでは、画像のalt
属性が識別名(Name)を提供している。例えば、Microsoft Inspect ObjectsなどのようにAPIを閲覧するツールには、alt
属性を可視化できないものもあるが、支援技術では抽出できる。
コード例:
<a href="www.example.com"><img src="example_logo.gif" alt="例"></a>
事例 1cでは、識別名(Name)が「テキスト例」となるように、リンクの中にある異なる要素が組み合わされている。
コード例
<a href="www.example.com">テキスト<img src="example_logo.gif" alt="例"></a>
HTMLでは、ボタンを生成するのにさまざまな方法があるが、それらは全て「プッシュボタン」という役割(Role)に位置付けられる。
事例 2aでは、button
要素内の「保存」というテキストが識別名(Name)となる。値(Value)はない。
コード例:
<button>保存</button>
事例 2bでは、value
属性を用いて「保存」「送信」「リセット」という識別名(Name)を指定している。
コード例
<input type="button" value="保存" />
<input type="submit" value="送信" />
<input type="reset" value="リセット" />
事例 2cでは、alt
属性を用いて「保存」という識別名(Name)を指定している。
コード例:
<input type="image" src="save.gif" alt="保存" />
事例 2dでは、alt
属性ではなく、title
属性を用いて「保存」という識別名(Name)を指定している。
コード例
<input type="image" src="save.gif" title="保存" />
事例 2eでは、input
要素のalt
属性を用いて「保存」という識別名(Name)を指定している。title
属性は指定していない。【訳注:コード例と矛盾しているので、WCAGワーキンググループに確認中。】
コード例:
<input type="image" src="save.gif" alt="保存" title="保存" />
事例 3aでは、入力フィールドが「編集可能テキスト」という役割(Role)を持っている。label
要素のfor
属性が、input
要素のid
属性を参照することで、label
要素をinput
要素と関連付けている。input
要素の識別名(Name)は、label
要素で指定した「果物の種類」となる。値(Value)は、value
属性の「バナナ」となる。
コード例:
<label for="text_1">果物の種類</label>
<input id="text_1" type="text" value="バナナ">
事例 3bでは、入力フィールドが事例 3aと同じ役割(Role)[ここから削除] と値(Value)[削除ここまで]を持つが、[ここから追加] 値(Value)がなく、[追加ここまで]識別名(Name)をtitle
属性で指定している点が異なる。
コード例:
<input id="text_1" type="text" [ここから削除] value="バナナ" [削除ここまで]title="果物の種類">
事例 4は、input
要素のtype
属性から「チェックボックス」という役割(Role)を持っている。label
要素のfor
属性がinput
要素のid
属性を参照することで、label
要素をinput
要素と関連付けている。input
要素の識別名(Name)は、label
要素で指定した「チーズ」となる。状態(State)はchecked
属性で「チェックあり」又は「チェックなし」に設定できる。そのコントロールに対するユーザーのインタラクションによって、状態(State)が変更される。
コード例:
<label for="cb_1">チーズ</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">赤</label>
<input type="radio" name="color" id="r2" /><label for="r2">青</label>
<input type="radio" name="color" id="r3" /><label for="r3">緑</label>
事例 6aは、select
要素によって「コンボボックス」という役割(Role)を持っている。識別名(Name)は「数量」で、label
要素から与えられている。select
要素に識別名を付け忘れるのは、よくあるエラーの一つである。値(Value)は、selected
属性[ここから変更] (XHTMLでは値を "selected
" と指定)のある[変更ここまで]option
要素であり、初期値は「2個」ということになる。
コード例:
<label for="s1">数量</label>
<select id="s1" size="1">
<option>1個</option>
<option selected="selected">2個</option>
<option>3個</option>
</select>
事例 6bでは、事例 6aのselect
要素と同じ識別名(Name)、役割(Role)、値(Value)であるが、識別名をtitle
属性で指定している点が異なる。この方法は、ラベルを視覚的に表示しないほうがよい場合に用いることができる。
コード例
<select id="s1" title="数量" size="1">
<option>1個</option>
<option selected="selected">2個</option>
<option>3個</option>
</select>
事例 7aは、textarea
要素の「編集可能なテキスト」という役割(Role)を持っている。識別名(Name)は、label
要素で指定した「あなたの発言をここに入力」である。値(Value)は、textarea
要素内にある「87年前」である。
コード例:
<label for="ta_1">あなたの発言をここに入力</label>
<textarea id="ta_1" >87年前</textarea>
[ここから変更] 事例 7bは、同じ役割(Role)を持ち、識別名(Name)はtitle
属性を用いて指定していて、値(Value)は空である。[変更ここまで]
コード例:
<textarea id="ta_1" title="あなたの発言をここに入力" >87年前</textarea>
事例 8のラジオボタンのフィールドセットには「グループ化」という役割(Role)がある。識別名(Name)はlegend
要素によって与えられている。
コード例:
<fieldset>
<legend>色を選択:</legend>
<input id="red" type="radio" name="color" value="red" /><label for="red">赤</label><br />
<input id="blue" type="radio" name="color" value="blue" /><label for="blue">青</label><br />
<input id="green" type="radio" name="color" value="green" /><label for="green">緑</label>
</fieldset>
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
HTMLのソースコードを調べる。
リンク及びフォーム要素に対して、上記の表で示されているように、識別名(Name)、値(Value)、状態(State)が指定されている。
上記2.を満たしている。
注意: この実装方法が「達成基準を満たすことのできる実装方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの実装方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の実装方法によってその達成基準が満たされていることもありうる。
日本語訳における注記:
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。