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

適用 (対象)

HTML 及び XHTML

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

達成基準 1.3.1: 情報及び関係性 (書かれていない達成方法を満たす手段として十分)
達成基準 3.3.2: ラベル又は説明 (十分な達成方法)

解説

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

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

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

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

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

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

訳注

WAIC では H71 に関するアクセシビリティサポーテッド（AS）情報を提供している。2020 年 3 月版のアクセシビリティサポーテッド（AS）情報: H71 も参照されたい。

事例

例 1: 選択式のテスト

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

<fieldset>
  <legend>The play <cite>Hamlet</cite> was written by:</legend>
  <input type="radio" id="shakesp" name="hamlet" checked="checked" value="a">
  <label for="shakesp">William Shakespeare</label><br />
  <input type="radio" id="kipling" name="hamlet" value="b">
  <label for="kipling">Rudyard Kipling</label><br />
  <input type="radio" id="gbshaw" name="hamlet" value="c">
  <label for="gbshaw">George Bernard Shaw</label><br />
  <input type="radio" id="hem" name="hamlet" value="d">
  <label for="hem">Ernest Hemingway</label><br />
  <input type="radio" id="dickens" name="hamlet" value="e">
  <label for="dickens">Charles Dickens</label>
</fieldset>

訳注

WAIC では H71-1 に関するアクセシビリティサポーテッド（AS）情報を提供している。2014 年 6 月版のアクセシビリティサポーテッド（AS）情報: H71-1 では、「達成可能」と評価されている。WAIC はこの達成方法が検証した環境で広く動作すると判断している。

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

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

<fieldset>
  <legend>I am interested in the following (check all that apply):</legend>
  <input type="checkbox" id="photo" name="interests" value="ph">
  <label for="photo">Photography</label><br />
  <input type="checkbox" id="watercol" name="interests" checked="checked" value="wa">
  <label for="watercol">Watercolor</label><br />
  <input type="checkbox" id="acrylic" name="interests" checked="checked" value="ac">
  <label for="acrylic">Acrylic</label>
  …
</fieldset>

訳注

WAIC では H71-2 に関するアクセシビリティサポーテッド（AS）情報を提供している。2014 年 6 月版のアクセシビリティサポーテッド（AS）情報: H71-2 では、「達成可能」と評価されている。WAIC はこの達成方法が検証した環境で広く動作すると判断している。

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

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

<form action="http://example.com/vote" method="post">
  <fieldset>
    <legend>Your preferred philosopher</legend>
    <input type="radio" name="philosopher" id="philosopher_socrates" value="socrates"/>
    <label for="philosopher_socrates">Socrates</label>
    <input type="radio" name="philosopher" id="philosopher_plato" value="plato"/>
    <label for="philosopher_plato">Plato</label>
    <input type="radio" name="philosopher" id="philosopher_aristotle" value="aristotle"/>
    <label for="philosopher_aristotle">Aristotle</label>
  </fieldset>
  </form>

注記

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

訳注

WAIC では H71-3 に関するアクセシビリティサポーテッド（AS）情報を提供している。2014 年 6 月版のアクセシビリティサポーテッド（AS）情報: H71-3 では、「達成可能」と評価されている。WAIC はこの達成方法が検証した環境で広く動作すると判断している。

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

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

<form action="http://example.com/adduser" method="post">
   <fieldset>
     <legend>Residential Address</legend>
     <label for="raddress">Address: </label>
     <input type="text" id="raddress" name="raddress" />
     <label for="rzip">Postal/Zip Code: </label>
     <input type="text" id="rzip" name="rzip" />
     ...more residential address information...
   </fieldset>
   <fieldset>
     <legend>Postal Address</legend>
     <label for="paddress">Address: </label>
     <input type="text" id="paddress" name="paddress" />
     <label for="pzip">Postal/Zip Code: </label>
     <input type="text" id="pzip" name="pzip" />
     ...more postal address information...
   </fieldset>
</form>

訳注

WAIC では H71-4 に関するアクセシビリティサポーテッド（AS）情報を提供している。2014 年 6 月版のアクセシビリティサポーテッド（AS）情報: H71-4 では、「達成可能」と評価されている。WAIC はこの達成方法が検証した環境で広く動作すると判断している。

参考リソース

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

HTML 4.01 Checkboxes
Accessible Forms using WCAG 2.0

検証

手順

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

論理的に関連している input 要素又は select 要素のグループが、fieldset 要素内に含まれていることを確認する。
各 fieldset 要素には、そのグループの説明を含む legend 要素が指定されていることを確認する。

期待される結果

上記全ての結果が真である。

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

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