アクセシビリティ・サポーテッド(AS)情報:H085-1

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

関連する達成基準の実装方法一覧

7.1.3.1情報及び関係性に関する達成基準 (等級A)

テストファイル

H085-1のテストファイル

見解

要注意

対象

optgroup要素のlabel属性(select要素のセレクトメニュー)

注意点

select要素を用いる際には、あらかじめ選択肢の数をできるだけ絞り込むことが重要である。
また、optgroup要素のラベルがなくても、選択肢(option要素)の文言だけで正確に理解できるかどうかに注意する必要がある(optgroup要素のラベルと組み合わせなければ理解・区別できない選択肢の文言は避けるべきである)。

代替もしくは推奨する方法

例えば選択肢の数が100を超えるような場合には、select要素を分けるなどして、利用者が段階的に選んでいけるような別の方法を用いたほうがよいことがある。

備考

optgroup要素を用いることによって、見た目には選択肢のグループ分けが明確になるが、スクリーンリーダーによるサポートが不十分である。しかし、使用することによる悪影響はなく、スクリーンリーダーの今後の機能向上に期待する。

テスト結果の詳細

ユーザエージェント 検証結果 操作手順 備考
Internet Explorer 6.0 マウスでクリックすれば問題なく表示されるが、キーボード操作ではヘルプに掲載されていない操作(alt+↓or↑)で表示
Internet Explorer 7.0 マウスでセレクトメニューを選んだとき、グルーピングされた状態(例えば「フルーツ」が「リンゴ」、「バナナ」、「桃」をグルーピングしたラベルであること)を確認
しかし、キーボード↓↑で操作するとグルーピングのラベル(「フルーツ」)を見ることができない。
Alt + ↓or↑で見ることはできるが、この操作はキー操作集にない
Internet Explorer 8.0 セレクトメニュー内で「フルーツ」が太字になって、各選択肢はインデント表示されているため、「フルーツ」が「リンゴ」、「バナナ」、「桃」、「みかん」をグルーピングしたラベルであることが分かる。野菜、焼菓子も同様。
Internet Explorer 9 1:マウスでセレクトメニューを選んだとき、「フルーツ」(太字)が「リンゴ」、「バナナ」、「桃」、「野菜」(太字)が「にんじん」「キュウリ」「ピーマン」、「焼菓子」(太字)を「アップルパイ」「チョコレートケーキ」でグルーピングしたラベルであることが表示されているか確認 Alt+↓でセレクトメニューのリストを展開しグルーピングを確認することが可能
Firefox 3.5 マウスでセレクトメニューを選んだとき、グルーピングされた状態(例えば「フルーツ」が「リンゴ」、「バナナ」、「桃」をグルーピングしたラベルであること)を確認
しかし、キーボード↓↑で操作するとグルーピングのラベル(「フルーツ」)を見ることができない。
Alt + ↓or↑で見ることはできるが、この操作はキー操作一覧表にない
Firefox 4.0 1:マウスでセレクトメニューを選んだとき、グルーピングされた状態(例えば「フルーツ」が「リンゴ」、「バナナ」、「桃」をグルーピングしたラベルであること)を確認 Alt+↓でセレクトメニューのリストを展開しグルーピングを確認することが可能
Firefox 9.0 マウスでセレクトメニューを選んだとき、「フルーツ」(太字)が「リンゴ」、「バナナ」、「桃」、「野菜」(太字)が「にんじん」「キュウリ」「ピーマン」、「焼菓子」(太字)を「アップルパイ」「チョコレートケーキ」でグルーピングしたラベルであることが表示されているか確認 Alt+↓でセレクトメニューのリストを展開しグルーピングを確認することが可能
Safari 3.2 セレクトメニュー内の選択肢がグルーピングされているのを確認。 ○:キーボード操作でフォーカスがあたって矢印キーを動かすとジャンプメニューが表示され、見出しとともにグルーピングされていることが確認できる。
Safari 5.0.3
JAWS for Windows 9.0 × ■操作手順
セレクトメニューにフォーカスを当ててEnterを押すと項目が選択できるが「リンゴ」「バナナ」「桃」とひとつづつしか読み上げない。また「にんじん」のときには何も読み上げなくなる(本来グループの「野菜」の項目になっていると推測される)(フォームモードオンで確認)
■音声読み上げ
「リンゴ」
「バナナ」
「桃」
・・・・
ひとつづつしか読み上げない
ホームページ・リーダー 3.04 × ■操作手順
セレクトメニュー内でEnterを押し→で先に進むと最初「フルーツ」「リンゴ」は一緒に読み上げられるが、次の「バナナ」「桃」「みかん」ではフルーツは読み上げられない。「野菜」「焼菓子」についても同様。
■音声読み上げ
「 (フォーム1 の先頭。) 好きな食べ物は何ですか? (選択メニューの先頭: 9 項目。) [縮小。] リンゴ [選択中。] (選択メニューの終わり。)  (フォーム1 の終わり。)」
Homepage Readerでは対応していない模様
PC-Talker XP 3.06 × ■操作手順
セレクトメニュー内でグルーピングしたラベルがわかるようには読み上げない。
■音声読み上げ
「好きな食べ物は何ですか? のコンボボックス 選択りんご」
セレクトメニュー内でグルーピングされている「フルーツ」などは読み上げられなかった。
PC-Talker XP 3.06 + NetReader 1.18 × ■操作手順
セレクトメニュー内の選択肢が、optgroup要素のlabel属性値でグルーピングされていることが分かるように読み上げなかった。(例:「フルーツ」が、「リンゴ」、「バナナ」、「桃」、「みかん」をグルーピングしたラベルであることが分かるように読み上げなかった)
■音声読み上げ
「好きな食べ物は何ですか クエスチョン 選択 リンゴ スペースで選択」
FocusTalk V3 × ■操作手順
1.Tabキーでコンボボックスにフォーカスを移動すると「コンボボックス りんご、50分の18」と読み上げる。
2.Enterキーを押すと、リストボックスウィンドウが開かれ、「リストボックスウィンドウのメッセージ 好きな食べ物は何ですか? OK、エスケープはキャンセル」と読み上げる。
3.下矢印キーを押すと、「リスト項目 リンゴ バナナ 桃 みかん・・・」と読み上げる。
■音声読み上げ
「リスト項目 リンゴ バナナ 桃 みかん・・・」
リストボックスを開くと、optgroupの属性値:フルーツ、野菜、焼菓子は表示されない。
NVDA 2010.1j ■操作手順
コンボボックスに入り上下の矢印キーを使って項目間を移動すると、グループをまたぐたびに「フルーツ、野菜、小菓子」と読み上げられ、続いて項目名とグループ内での位置が読み上げられた。
■音声読み上げ
「好きな食べ物はなんですか コンボボックスクローズサブメニュー リンゴ」
「好きな食べ物は何ですか リンゴクローズサブメニュー1の4レベル2 バナナ2の4レベル2 、桃3の4レベル2 ミカン4の4レベル2
野菜見出し2の3 にんじん1の3レベル2 キュウリ2の3レベル2 ピーマン3の3レベル2
小菓子見出し33の3 アップルパイ1の2 チョコレートケーキ2の2」
NVDA 2011.1 × ■操作手順
コンボボックス内で上下の矢印キーを使って項目間を移動しても、リンゴ、バナナ、モモ、ミカン、ニンジンなどの個別の項目名は読み上げられるものの、フルーツや野菜などのグループ名は読み上げられなかった。
■音声読み上げ
「好きな食べ物はなんですか コンボボックスクローズサブメニュー リンゴ」
「好きな食べ物は何ですか リンゴクローズサブメニュー1の4レベル2 バナナ2の4レベル2 、桃3の4レベル2 ミカン4の4レベル2
にんじん1の3レベル2 キュウリ2の3レベル2 ピーマン3の3レベル2
アップルパイ1の2 チョコレートケーキ2の2」