select 要素内の option 要素をグループ化するために、optgroup 要素を使用する

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

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

利用者の入力項目をまとめている HTML 及び XHTML のページ。

これは達成基準 1.3.1: 情報及び関係性 (書かれていない達成方法を満たす手段として十分) に関する達成方法である。

解説

この達成方法の目的は、セレクトメニューの中の選択肢をグループ化することである。セレクトメニューは、複数選択式リストやコンボボックスといった、フォームコントロールの許容値の一組である。セレクトメニューには、関連する選択肢のグループが含まれることがある。単に「ダミー」の選択肢を使ってこれらのグループを区切るのではなく、セマンティックに特定すべきである。これによって、ユーザエージェントは、グループごとに選択肢を閉じておき、利用者が選択肢を素早く拾い読みできるようにしたり、利用者にとって興味のある選択肢がどのグループに属しているのかを示すことができる。また、長い項目を視覚的に分割して、利用者が簡単に自分が選びたい選択肢を発見することにも役立つ。

HTML では、select 要素は複数選択式リストとコンボボックスの両方の生成に利用される。選択肢それぞれは、option 要素で示される。選択肢をグループ化するには、optgroup 要素の子要素に、関連する option 要素を含める。グループに ”label" 属性でラベル付けすることで、利用者がそのグループに含まれているものは何か予想できるだろう。

optgroup 要素は select 要素の直接の子要素、option 要素は optgroup 要素の直接の子要素として含めるべきとされる。select 要素では、optgroup 要素に一つだけ option 要素を含めることもできるが、実はこのような利用法がデザインを意図したものでないか、コンテンツ制作者は検討すべきである。optgroup 要素を入れ子にはできないので、select 要素内では 1 段階のグループ化しかできない。

グループ分け情報がリストの理解に不可欠な場合でも、コンテンツ制作者は、optgroup 要素が提供するグループ分け情報をスクリーンリーダーが読み上げなくても理解可能なように option 要素のラベルを定義するとよい。

訳注

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

事例

例 1

次のコンボボックスは、好きな食べ物のデータをまとめたものである。利用者が好みのものを素早く選択できるように、食べ物の種類によってグループ化してある。 

<form action="http://example.com/prog/someprog" method="post">
    <label for="food">What is your favorite food?</label>
    <select id="food" name="food">
      <optgroup label="Fruits">
        <option value="1">Apples</option>
        <option value="3">Bananas</option>
        <option value="4">Peaches</option>
        <option value="5">...</option>
      </optgroup>
      <optgroup label="Vegetables">
        <option value="2">Carrots</option>
        <option value="6">Cucumbers</option>
       <option value="7">...</option>
     </optgroup>
     <optgroup label="Baked Goods">
       <option value="8">Apple Pie</option>
       <option value="9">Chocolate Cake</option>
       <option value="10">...</option>
     </optgroup>
   </select>
</form>
訳注

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

例 2

次の事例は、複数選択式リストで optrgroup 要素をどのように用いるかを示している。 

<form action="http://example.com/prog/someprog" method="post">
    <label for="related_techniques"><strong>Related Techniques:</strong></label>
    <select name="related_techniques" id="related_techniques" multiple="multiple" size="10">
  <optgroup label="General Techniques">
    <option value="G1">G1: Adding a link at the top of each page ... </option>
    <option value="G4">G4: Allowing the content to be paused and restarted ... </option>
    <option value="G5">G5: Allowing users to complete an activity without any time... </option>
    <option value="G8">G8: Creating an extended audio description for the ... </option>
    <option value="G9">G9: Creating captions for live synchronized media... </option>
    <option value="G10">G10: Creating components using a technology that ... </option>
  </optgroup>
  <optgroup label="HTML Techniques">
    <option value="H2">H2: Combining adjacent image and text links for the same ... </option>
    <option value="H4">H4: Creating a logical tab order through links, form ... </option>
    <option value="H24">H24: Providing text alternatives for the area ... </option>
  </optgroup>
  <optgroup label="CSS Techniques">
    <option value="C6">C6: Positioning content based on structural markup... </option>
    <option value="C7">C7: Using CSS to hide a portion of the link text... </option>
  </optgroup>
  <optgroup label="SMIL Techniques">
    <option value="SM1">SM1: Adding extended audio description in SMIL 1.0... </option>
    <option value="SM2">SM2: Adding extended audio description in SMIL 2.0... </option>
    <option value="SM6">SM6: Providing audio description in SMIL 1.0... </option>
  </optgroup>
  <optgroup label="ARIA Techniques">
    <option value="ARIA1">ARIA1: Using WAI-ARIA describedby... </option>
    <option value="ARIA2">ARIA2: Identifying required fields with the "required"... </option>
    <option value="ARIA3">ARIA3: Identifying valid range information with "valuemin" ... </option>
  </optgroup>
  <optgroup label="Common Failures">
    <option value="F1">F1: Failure of SC 1.3.2 due to changing the meaning of content by... </option>
    <option value="F2">F2: Failure of SC 1.3.1 due to using changes in text presentation... </option>
    <option value="F3">F3: Failure of SC 1.1.1 due to using CSS to include images  ... </option>
    <option value="F4">F4: Failure of SC 2.2.2 due to using text-decoration:blink ...</option>
  </optgroup>
</select>
</form>
訳注

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

参考リソース

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

検証

手順

  1. 選択リストに含まれる選択肢について、関連する選択肢のグループがあるかどうかを確認する。
  2. 関連する選択肢のグループがある場合、optgroup 要素でグループ化すべきである。

期待される結果

  • #2 の結果が真である。