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

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

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

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

テストファイル

H085-2のテストファイル

見解

要注意

対象

optgroup要素のlabel属性(select要素の multiple="multiple" を用いた複数選択式リスト)

注意点

multiple属性を使う必要性があるかどうかを慎重に検討する必要がある。
また、optgroup要素のラベルがなくても、選択肢(option要素)の文言だけで正確に理解できるかどうかに注意する必要がある(optgroup要素のラベルと組み合わせなければ理解・区別できない選択肢の文言は避けるべきである)

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

チェックボックスのほうがよいかもしれない。
あわせて、あらかじめ選択肢の数をできるだけ絞り込むことが重要である。

備考

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

テスト結果の詳細

ユーザエージェント 検証結果 操作手順 備考
Internet Explorer 6.0 optgroup要素のlabel属性値はイタリックボールドで表示された。
Internet Explorer 7.0 選択肢をグルーピングしているラベルが太く強調されているので、ラベルであることが理解できる。
Internet Explorer 8.0 選択肢をグルーピングしているラベルが太く強調されているので、ラベルであることが理解できる。選択肢はインデントされて表示。
Internet Explorer 9 1:optgroup要素のlabel属性値(General Techniques、HTML Techniques)が、そのグループのラベルであることが分かるように太字で表示されることを確認
Firefox 3.5 General Techniques、HTML Techniques、CSS Techniques、CSS Techniques、SMIL Techniques、ARIA Techniques、Common Failuresが太字斜体で表示され、子要素がインデントされて表示されている
Firefox 4.0 1:optgroup要素のlabel属性値(General Techniques、HTML Techniques)が、そのグループのラベルであることが分かるように表示されることを確認
Firefox 9.0 optgroup要素のlabel属性値(General Techniques、HTML Techniques)が、そのグループのラベルであることが分かるように太字で表示されることを確認
Safari 3.2 General TechniquesとHTML Techniquesが太文字で表示され、その下に書かれている項目はインデントされているので、グループラベルが分かるように表示されている
Safari 5.0.3
JAWS for Windows 9.0 × ■操作手順
Enterを押し、フォームモードオンにして操作。それぞれのテクニックス項目は読み上げた。
■音声読み上げ(フォームモードオンで確認)
「G1 コロン メインコンテンツエリアへ直接移動するリンクを各ページの戦闘に追加する マル」
「G4 コロン コンテンツを一時停止さあせて テン 一時停止させたところから再開できるようにする」
・・・・
カレント行の読み上げのみでグルーピングしているoptgroup要素のlabel属性値の読み上げはしない
Ins+Zで仮想PCカーソルをオフにしても操作してみたがNG
ホームページ・リーダー 3.04 ■操作手順
Alt+F1で「ラベルは関連するテクニック一覧:HTML Techniques:です」
のように読み上げる
■音声読み上げ
「ラベルは関連するテクニック一覧:HTML Techniques:です」
PC-Talker XP 3.06 × ■操作手順
選択肢をグルーピングしているoptgroup要素のlabel属性値は読み上げない。「関連テクニック一覧のリストボックス」とだけ読み上げる。
■音声読み上げ
「関連テクニック一覧のリストボックス」
グルーピングしているラベル属性が読み上げられないので、×。
PC-Talker XP 3.06 + NetReader 1.18 × ■操作手順
選択肢をグルーピングしているoptgroup要素のlabel属性値が、そのグループのラベルであることが分かるように読み上げられなかった。
■音声読み上げ
「関連テクニック一覧 コロン センタク G ワン コロン メインコンテンツエリアへ直接移動するリンクを各ページの先頭に追加する ニジュウニ コウモクチュウ ゼロ コウモク ヲ センタク」
FocusTalk V3 × ■操作手順
・全文読みモード、1行読みモードで↓で読み進めても、label「General Techniques」は読み上げられない。
・G1の行でEnterを押すと、ウィンドウが開いて「↓」で「General Techniques」と読み上げるが、それがグループのラベルであることが識別できるような読み上げはしない。
■音声読み上げ
・「関連テクニック一覧: 強調 リストボックス G1: メインコンテンツエリアへ直接移動するリンクを各ページの先頭に追加する 」
・「 関連テクニック一覧: 強調」、「リストボックス」、「G1: メインコンテンツエリアへ直接移動するリンクを各ページの先頭に追加する」、「関連テクニック一覧:、OK、エスケープはキャンセル関連テクニック一覧 のリストボックス、」、「 リストボックスウィンドウのメッセージ。」、「 General Techniques」、「G1: メインコンテンツエリアへ直接移動するリンクを各ページの先頭に追加する」
NVDA 2010.1j ×
NVDA 2011.1 テスト不可 どの部分が「選択肢をグルーピングしているoptgroup要素のlabel属性値」なのかがわからないため検証できない。