このページには、前バージョン(2008年12月11日版の日本語訳)から修正(追加、変更または削除)された箇所があります。
設定:全ての修正を非表示   |   削除箇所を表示/非表示  |   問題No.を表示/非表示   |   [ここから] / [ここまで] を表示/非表示   |   全ての修正を表示

表示サンプル: このページの修正箇所は次のように表示されます。

WCAG 2.0 実装方法集

メインコンテンツへスキップ

-

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

適用(対象)

HTML 及び XHTML

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

解説

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

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

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

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

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

[ここから削除]

関連する複数のラジオボタンが小さなグループであり、分かりやすい使用法とはっきりと異なった選択肢で構成されている場合は、fieldset要素とlegend要素を利用する必要はなく、H44: label要素を用いて、テキストのラベルとフォーム・コントロールを関連付ける の実装方法を用いれば十分なこともある。

[削除ここまで]

事例

事例 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要素が指定されている。

判定基準

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

日本語訳における注記:

この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。