WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

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

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

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

適用 (対象)

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> 要素内のテキスト

事例

事例 1: リンク

ユーザエージェントは、リンクに移動したり、リンクを選択するメカニズムを提供する。次の各事例では、「リンク」という役割 (role) が <a href> で与えられている。<a name> は「リンク」という役割を与えない点に注意しよう。値 (value) に該当するのは、href 属性の URI である。

事例 1a

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

コード例:

<a href="www.example.com">サイト例</a> 

事例 1b

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

コード例:

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

事例 1c

事例 1c では、画像の代替テキストとリンクテキストをが組み合わせるときにいくつかの支援技術では空白文字を自動的に挿入しない。テキストが空白文字抜きで組み合わないようにするときは、画像と隣接した単語の間に空白を入れるのが最も安全であり、それらの単語が合流しない。

コード例:

<a href="www.example.com">テキスト<img src="example_logo.gif" alt="例"></a> 

訳注: WAIC では H91-1c に関するアクセシビリティ・サポーテッド(AS)情報を提供している。

2014 年 6 月版のアクセシビリティ・サポーテッド(AS)情報: H91-1c では、「要注意」と評価されている。WAIC はウェブ制作者にこの達成方法が一部の環境では動作しないことに注意を促すものである。

事例 2: ボタン

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

事例 2a

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

コード例:

<button>保存</button> 

事例 2b

事例 2b では、value 属性を用いて「保存」「送信」「リセット」という名前 (name) を指定している。

コード例:

<input type="button" value="保存" /> 
<input type="submit" value="送信" />  
<input type="reset" value="リセット" /> 

事例 2c

事例 2c では、alt 属性を用いて「保存」という名前 (name) を指定している。

コード例:

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

事例 2d

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

コード例:

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

事例 2e

HTML 4.01 及び XHTML 1.x において、見出し要素はセクションの先頭をマークするだけであることに注意すること。見出し要素をセクションコンテンツに明示的に関連付けるためのマークアップが存在しないため、次の見出し要素が出現するまで、見出しは後に続くすべてのコンテンツに適用されると見なされる。

コード例:

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

事例 3: 入力フィールド

事例 3a

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

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

コード例:

<input id="text_1" type="text" title="果物の種類">

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

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

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

事例 6: セレクトメニュー

事例 6a

事例 6a は、select 要素によって「リストボックス」という役割 (role) を持っている。名前 (name) は「数量」で、label 要素から与えられている。select 要素に名前 (name) を付け忘れるのは、よくあるエラーの一つである。値 (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

事例 6b では、事例 6a の select 要素と同じ名前 (name)、役割 (role)、値 (value) であるが、名前 (name) を title 属性で指定している点が異なる。この方法は、ラベルを視覚的に表示しないほうがよい場合に用いることができる。

コード例:

<select id="s1" title="数量" size="1">
 <option>1個</option>
 <option selected="selected">2個</option>
 <option>3個</option>
</select> 

事例 7: テキストエリア

事例 7a

事例 7a は、textarea 要素の「編集可能なテキスト」という役割 (role) を持っている。名前 (name) は、label 要素で指定した「あなたの発言をここに入力」である。値 (value) は、textarea 要素内にある「87 年前」である。

コード例:

<label for="ta_1">あなたの発言をここに入力</label>
<textarea id="ta_1" >87年前</textarea> 

事例 7b

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

コード例:

<textarea id="ta_1" title="あなたの発言をここに入力" >87年前</textarea> 

事例 8: フォームコントロールのグループ化

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

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

参考リソース

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

検証

手順

  1. HTML のソースコードを調べる。

  2. リンク及びフォーム要素に対して、上記の表で示されているように、名前 (name)、値 (value)、状態 (state) が指定されている。

期待される結果

この達成方法が「十分な達成方法」の一つである場合、この手順や期待される結果を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。