概要と目的
ここでは、リスト要素に対する ARIAを使用した場合の検証を行う。
（特にSafariにおいては、list-style によってリスト認識しなくなる問題がどう影響するのか）
また、リスト要素にラベルをつけた場合にどう影響するのかについても調べる。
- role 指定による違い
- 上記について更に、aria-labeledby を使用した場合
各種検証
スクリーンリーダー
VoiceOver(MacOS+Chrome)
サンプル１
問題なく動作
- リスト２項目
- リスト要素１、２の１
- リスト要素２、２の２
- リストの終わり
サンプル２
問題なく動作（デフォルトのroleと指定が同じため）
- リスト２項目
- リスト要素１、２の１
- リスト要素２、２の２
- リストの終わり
サンプル３
問題なく動作、labelledbyのテキストがリスト要素で読まれている
- リスト ARIA検証リスト２項目
- リスト要素１、２の１
- リスト要素２、２の２
- リストの終わり
サンプル４
問題なく動作
- リスト ARIA検証リスト２項目
- リスト要素１、２の１
- リスト要素２、２の２
- リストの終わり
採用案
タイトル欄を表示しつつ、スクリーンリーダーでは繰り返しを避けられている
- リスト タイトル欄 ２項目
- リスト要素１、２の１
- リスト要素２、２の２
- リストの終わり
VoiceOver(MacOS+Safari)
サンプル１
リストとして認識していない
- リスト要素１
- リスト要素２
サンプル２
roleを明示的に指定すると、他のブラウザと同じように読まれる
- リスト２項目
- リスト要素１、２の１
- リスト要素２、２の２
- リストの終わり
サンプル３
aria-labelledby の要素は読まれるが、roleはグループと認識している
- ARIA検証リスト、グループ
- リスト要素１、２の１
- リスト要素２、２の２
- 終わり、ARIA検証リスト、グループ
サンプル４
Chrome と同じ出力が為された
- リスト ARIA検証リスト２項目
- リスト要素１、２の１
- リスト要素２、２の２
- リストの終わり
採用案
タイトル欄を表示しつつ、スクリーンリーダーでは繰り返しを避けられている
- リスト タイトル欄 ２項目
- リスト要素１、２の１
- リスト要素２、２の２
- リストの終わり
ChromeVox
キー操作
キー操作自体には問題はない。 Tabキーを押すと、summary要素、a要素のそれぞれにフォーカスを移せる。
結論
ブラウザ間で同じ動作を保つためには、Safari用にリスト要素に role="list" 指定が必要となる。
（※ただし、それがリストであるとユーザーに認識させる必要がない場合は、そこまで神経質になる必要はないだろう）
リストに名前をつける場合には、aria-labelledby による指定で可能。 これはhidden属性や aria-hiddenを使用しても読み上げが可能。
採用案では、リストタイトルを表示し、そのリストが何であるかをわかりやすくした。 一方でスクリーンリーダーでは、同じ内容が繰り返しにならないよう、aria-hiddenを使って調整を施している。