H85: optgroup要素を用いて、select要素内のoption要素をグループ化する

ユーザーエージェント及び支援技術によるサポート

optgroup要素はスクリーンリーダーに広くサポートされているわけではない。

ユーザーエージェントは、option要素とoptgroup要素に対するlabel属性のサポートが一貫しておらず、支援技術にも広くサポートされているわけではない。

解説

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

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

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

事例

事例 1

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

コード例：


<form action="http://example.com/prog/someprog" method="post">
    <label for="food">あなたの好きな食べ物は？</label>
    <select id="food" name="food">
      <optgroup label="Fruits">
        <option value="1">りんご</option>
        <option value="3">バナナ</option>
        <option value="4">桃</option>
        <option value="5">...</option>
      </optgroup>
      <optgroup label="野菜">
        <option value="2">にんじん</option>
        <option value="6">きゅうり</option>
       <option value="7">...</option>
     </optgroup>
     <optgroup label="焼き菓子">
       <option value="8">アップルパイ</option>
       <option value="9">チョコレートケーキ</option>
       <option value="10">...</option>
     </optgroup>
   </select>
</form>

事例 2

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

コード例：


<form action="http://example.com/prog/someprog" method="post">
    <label for="related_techniques"><strong>関連する実装方法：</strong></label>
    <select name="related_techniques" id="related_techniques" multiple="multiple" size="10">
  <optgroup label="一般的な実装方法">
    <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の実装方法">
    <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の実装方法">
    <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の実装方法">
    <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の実装方法">
    <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>
    <option value="ARIA4">ARIA4: Using WAI-ARIA to programmatically identify form  ... </option>
  </optgroup>
  <optgroup label="不適合事例">
    <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>

参考ページ

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

検証

チェックポイント

セレクトメニューに含まれる選択肢について、関連する選択肢としてグループ化すべきものがある。
関連する選択肢のグループが、optgroup要素でグループ化してある。

判定基準

2.を満たしている。

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