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 では、識別名はリンクの中にあるテキストである。この場合は「サイト例」が該当する。

コード例:

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

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

事例 2e では、input 要素の alt 属性を用いて「保存」という識別名(Name)を指定している。title 属性は指定していない。【訳注:コード例と矛盾しているので、WCAGワーキンググループに確認中。】

コード例:

<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要素に識別名を付け忘れるのは、よくあるエラーの一つである。値(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)であるが、識別名を 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)が指定されている。

判定基準

この達成方法が「十分な達成方法」の一つである場合、このチェックポイントや判定基準を満たしていなければ、それはこの達成方法が正しく用いられていないことを意味するが、必ずしも達成基準を満たしていないことにはならない。場合によっては、別の達成方法によってその達成基準が満たされていることもありうる。