要注意
optgroup要素のlabel属性（select要素の multiple="multiple" を用いた複数選択式リスト）
VoiceOverはmultiple属性に対応していない。
また、optgroup要素のラベルがなくても、選択肢（option要素）の文言だけで正確に理解できるかどうかに注意する必要がある（optgroup要素のラベルと組み合わせなければ理解・区別できない選択肢の文言は避けるべきである）
multiple属性を使う必要性があるかどうかを慎重に検討する必要がある。可能であれば、チェックボックスなどを使用する方が望ましい。
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を押し、フォームモードオンにして操作。それぞれのテクニックス項目は読み上げた。 ■音声読み上げ（フォームモードオンで確認） 「Ｇ１ コロン メインコンテンツエリアへ直接移動するリンクを各ページの戦闘に追加する マル」 「Ｇ４ コロン コンテンツを一時停止さあせて テン 一時停止させたところから再開できるようにする」 ・・・・ |
カレント行の読み上げのみでグルーピングしているoptgroup要素のlabel属性値の読み上げはしない Ｉｎｓ+Zで仮想ＰＣカーソルをオフにしても操作してみたが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属性値」なのかがわからないため検証できない。 |
| Firefox18.0.1 | ○ | optgroup要素のlabel属性値（General Techniques、HTML Techniques）が、そのグループのラベルであることが分かるように太字で表示されることを確認 | |
| Google Chrome 25 | ○ | 【1】選択肢をグルーピングしているoptgroup要素のlabel属性値が、そのグループのラベルであることが分かるように表示されるかを確認する。 | 【1】○ 次の文言（General Techniques、HTML Techniques、CSS Techniques、SMIL Techniques、ARIA Techniques、Common Techniques）が、そのグループのラベルであることが分かるように太字で表示されることを確認した。 |
| Safari 6.0.5 | ○ | optgroup要素のlabel属性値は太字で表示される | |
| NVDA 2012.3 | ？ | テスト不可 | どの部分が「選択肢をグルーピングしているoptgroup要素のlabel属性値」なのかがわからないため検証できません。 |
| PC-Talker 7 2.12 | × | ■操作手順 1.複数選択式リストに移動後、上下矢印キーで選択肢を変更。その後、[実行]ボタンに移動してEnterキーを押下。 ■音声読み上げ Ctrl＋下矢印キー、またはTabキー 「関連テクニック一覧： のリストボックス 選択」 下矢印キー 「G4：（以下略）」 下矢印キー 「G5：（以下略）」 下矢印キー 「G8：（以下略）」 下矢印キー 「G9：（以下略）」 下矢印キー 「G10：（以下略）」 下矢印キー 「H2：（以下略）」 |
optgroup要素を完全に無視している。 また、最初の選択肢(G1)を読み上げないが、別の選択肢に移動後にCtrl＋上矢印キーで戻ると読み上げる。 |
| VoiceOver | × | ■操作手順 1.複数選択式リストの読み上げ開始時に、optgroup要素がいくつあるかを読み上げない。 2.optgroup要素のラベルを読み上げる際、optgroup要素がいくつあって、そのoptgroup要素が全体の中で何番目のoptgroup要素なのかが分かるように読み上げない。 3.optgroup要素の切り替わる位置が分かるように読み上げない。 4.各選択肢を読み上げる際、同じoptgroup要素内にoption要素がいくつあって、そのoption要素が何番目のoption要素なのかが分かるように読み上げない。 5.キーボード操作でoptgroup要素間をジャンプできない。 ■音声読み上げ 「General Techniques ピッカー項目 調整可能 値を調整するには1本指で上または下にスワイプします」 |
ピッカー上でスワイプするだけで、どんどん項目が選択されてしまう（かつ選択されたことが読み上げられない）ので、そもそもmultiple="multiple"の実装にVoiceOverが対応できていないと思われます。 |