WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

H71: フォーム・コントロールのグループに関する説明を提供するために、fieldset 要素及び legend 要素を使用する

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

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

適用(対象)

HTML 及び XHTML

これは、次の達成基準に関連する達成方法である:

解説

この達成方法の目的は、関連するフォーム・コントロールをセマンティックにグループ化する方法を提供することである。これによって、利用者はフォーム・コントロールの関係が理解でき、より早く効率的にフォームを利用できるようになる。

フォーム・コントロールは、fieldset 要素で囲むことによってグループ化できる。つまり、fieldset 要素内にある全てのフォームコントロールが関連付けられることになる。fieldset 要素内での最初の要素はlegend 要素でなければならず、legend 要素はそのグループのラベルや説明を提供するものである。なお、利用者を混乱させてしまう恐れがあるため、コンテンツ制作者は必要以上に fieldsets 要素を入れ子にすることを避けるべきである。

フォーム・コントロールのグループ化が最も重要なのは、関連するラジオボタンやチェックボックスをまとめるときである。ラジオボタンやチェックボックスは、name 属性で同じ値が指定されている場合に、一組のコントロールとして関連付けられる。これらは、選択肢の中から自由に選択できるセレクトメニューと同じように動作することになるが、セレクトメニューは単一のコントロールであるのに対し、ラジオボタンとチェックボックスは複数のコントロールである点が異なる。それぞれのラジオボタンやチェックボックスの個々のラベルは、そのグループの説明となる文脈を十分に伝えられないことがある。この場合、セマンティックにグループ化しておくことが特に重要であり、それによって単一のコントロールのように簡単に操作できるようになり、またグループの説明を補足することができる。ユーザエージェントは、その説明を提供し、複数のコントロールが同じグループの一部であることを利用者に伝えるために、各コントロールのラベルよりも先に legend 要素の内容を提示することが多い。

ラジオボタンやチェックボックスほどには明確に関連していないコントロールをグループ化することが有用になることがある。たとえば、利用者の住所を入力するフィールドがいくつかに分かれている場合、「住所」という legend 要素を付けてグループ化しておくとよい。

ただし、(単一の名前付きフィールドの値を持つ場合でも)関連するラジオボタン又はチェックボックスのグループに明らかな指示及び明確な選択肢が含まれている(すなわち、特定の各コントロールに関連付けられた個々のラベルが十分な記述を提供する)場合、fieldset 及び legend 要素は必須ではない。この場合は、H44: テキストのラベルとフォーム・コントロールを関連付けるために、label 要素を使用するで十分である。

ブラウザの初期状態では、fieldset 要素によってグループ化したコントロール全体を枠で囲むという表示であるため、コンテンツ制作者は fieldset 要素の利用を避けたい場合がある。しかし、このような視覚的なグループ化も有益であり、その状態のままにしておくこと(あるいは、何らかの形で視覚的にグループ化すること)をしっかり検討すべきである。見た目のスタイルについては、CSS で fieldset 要素に対する「border」プロパティを上書きしたり、fieldset 要素に対する「position」プロパティを上書きしたりすることによって変更できる。

事例

事例 1: 選択式のテスト

この事例では、1つの質問に対して5つの解答の中からどれかを選べるテスト項目を示している。解答はそれぞれラジオボタン(input type="radio")で提示されており、fieldset要素に含めてある。テストの質問内容はlegend要素でタグ付けしてある。

コード例:

<fieldset>
  <legend>戯曲<cite>ハムレット</cite>を書いたのは</legend>
  <input type="radio" id="shakesp" name="hamlet" checked="checked" value="a">
  <label for="shakesp">ウィリアム シェークスピア</label><br />
  <input type="radio" id="kipling" name="hamlet" value="b">
  <label for="kipling">ラドヤード キップリング</label><br />
  <input type="radio" id="gbshaw" name="hamlet" value="c">
  <label for="gbshaw">ジョージ バーナード ショー</label><br />
  <input type="radio" id="hem" name="hamlet" value="d">
  <label for="hem">アーネスト ヘミングウェイ</label><br />
  <input type="radio" id="dickens" name="hamlet" value="e">
  <label for="dickens">チャールズ ディケンズ</label>
</fieldset>

事例 2: チェックボックスのグループ

あるウェブサイトでの利用者・プロフィールのページで、利用者が複数のチェックボックスを選んで自分の興味を示せるようになっている。各チェックボックス(input type="checkbox")には、label がある。すべてのチェックボックスは、fieldset 要素に含められており、legend 要素にはチェックボックスのグループ全体の説明がある。

コード例:

<fieldset>
  <legend>次のことに興味があります(全て選択することも可)</legend>
  <input type="checkbox" id="photo" name="interests" value="ph">
  <label for="photo">写真</label><br />
  <input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">
  <label for="watercol">水彩画</label><br />
  <input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">
  <label for="acrylic">アクリル画</label>
  …
</fieldset>

事例 3: 同じ名前を付けたフィールドとして送信されるラジオボタン

この事例では、1人の哲学者を選ぶように利用者に求めている。各ラジオボタンが関連している(同じフィールドとして送信される)ことを示すために「name」属性で同じ値を指定し、見た目としてもグループ化すべき点に注意しよう。また、「name」属性は同じ値であっても、「id」属性はそれぞれ一意的な値でなければならない点にも注意しよう。

コード例:

<form action="http://example.com/vote" method="post">
  <fieldset>
    <legend>あなたが好きな哲学者</legend>
    <input type="radio" name="philosopher" id="philosopher_socrates" value="socrates"/>
    <label for="philosopher_socrates">ソクラテス</label>
    <input type="radio" name="philosopher" id="philosopher_plato" value="plato"/>
    <label for="philosopher_plato">プラトン</label>
    <input type="radio" name="philosopher" id="philosopher_aristotle" value="aristotle"/>
    <label for="philosopher_aristotle">アリストテレス</label>
  </fieldset>
  </form>

注記: 関連するチェックボックスのグループも同じように動作するが、利用者が1つ以上のフィールドを選べる点がラジオボタンとは異なる。

事例 4: 論理的に関連付けたコントロール

この事例では、居住地と郵送先のフィールドを別々に fieldset 要素でグループ化し、legend 要素で異なる内容を指定している。

コード例:

<form action="http://example.com/adduser" method="post">
   <fieldset>
     <legend>居住地</legend>
     <label for="raddress">住所: </label>
     <input type="text" id="raddress" name="raddress" />
     <label for="rzip">郵便番号: </label>
     <input type="text" id="rzip" name="rzip" />
     ……居住地の入力内容が続く……
   </fieldset>
   <fieldset>
     <legend>郵送先</legend>
     <label for="paddress">住所: </label>
     <input type="text" id="paddress" name="paddress" />
     <label for="pzip">郵便番号: </label>
     <input type="text" id="pzip" name="pzip" />
     ……郵送先の入力内容が続く……
   </fieldset>
</form> 

参考リソース

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

検証

チェックポイント

関連するコントロールのグループにおいて、各コントロールの個々のラベルが十分な記述を提供しておらず、追加でグループレベルの記述が必要な場合

  1. 論理的に関連している input 要素又は select 要素のグループが、1 つの fieldset 要素内に含められている。

  2. fieldset 要素には、そのグループの説明を含めた legend 要素が指定されている。

判定基準

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