HTML のフォームコントロール及びリンクを使用する

事例 1: リンク

ユーザエージェントは、リンクをナビゲートして選択するメカニズムを提供する。次の各事例では、<a href> により、役割 (role) は "link" となる。<a name> は "link" の役割 (role) を提供しないことに注意する。値 (value) は、href 属性の URI である。

事例 1a

事例 1a では、名前 (name) はリンクの中にあるテキストである。この場合は "Example Site" が該当する。

<a href="www.example.com">Example Site</a>
                    

事例 1b

リンクの中にある画像に関する事例 1b では、画像の 'alt' 属性が名前 (name) を提供している。例えば、Microsoft Inspect Objects などのように API を閲覧するツールには、alt 属性を可視化できないものもあるが、支援技術では抽出できる。

<a href="www.example.com"><img src="example_logo.gif" alt="Example"></a>
                    

事例 1c

事例 1c では、画像の代替テキストとリンクのテキストを連結するときに自動的に空白文字を挿入しない支援技術もある。テキストをスペースなしで連結すべきでない場合、画像と隣接する単語との間にスペースを挿入して、単語が混ざらないようにするのが最も安全である。

<a href="www.example.com"><img src="example_logo.gif" alt="Example"> Text</a>

事例 2: ボタン

HTML では、ボタンを生成するのにさまざまな方法があるが、それらは全て「プッシュボタン」という役割 (role) に位置付けられる。

事例 2a

事例 2a では、button 要素内の "save" というテキストが名前 (name) となる。値 (value) はない。

<button>Save</button>
                    

事例 2b

事例 2b では、'value' 属性を用いて "Save"、"Submit"、"Reset" という名前 (name) を指定している。

<input type="button" value="Save" /> 
<input type="submit" value="Submit" />  
<input type="reset" value="Reset" />   
                    

事例 2c

事例 2c では、'alt' 属性を用いて "save" という名前 (name) を指定している。

<input type="image" src="save.gif" alt="save" /> 
                    

事例 2d

事例 2d では、'alt' 属性ではなく、'title' 属性を用いて "save" という名前 (name) を指定している。

<input type="image" src="save.gif" title="save" />
                    

事例 2e

事例 2e は、コンテンツ制作者が input 要素の 'alt' 属性と 'title' 属性の両方を指定する場合、ユーザエージェントが名前 (name) をどのように決定するかを明らかにする。この場合、ユーザエージェントは、 'alt' 属性 ("save") を使用して、 'title' 属性を無視する。

<input type="image" src="save.gif" alt="save" title="save the file" />

事例 3

事例 3a

事例 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

事例 3b では、入力フィールドが事例 3a と同じ役割 (role) を持つが、値 (value) がなく、名前 (name) を 'title' 属性で指定している点が異なる。

<input id="text_1" type="text" title="Type of fruit">

事例 4: チェックボックス

事例 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: ラジオボタン

事例 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>
                    

事例 6

事例 6a

事例 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

事例 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>
                    

事例 7: テキストエリア

事例 7a

事例 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

事例 7b は、同じ役割 (role) を持ち、名前 (name) は 'title' 属性を用いて指定していて、値 (value) は空である。

<textarea id="ta_1" title="Type your speech here" >Four score and seven years ago</textarea>
                    

事例 8

ラジオボタンのフィールドセット

事例 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>