概要と目的
ここでは、***についての検証を行う
- summaryタグにインタラクティブ要素（例: aタグ）を用いることの問題
- インライン要素を用いてもダメかの確認
- アコーディオンとしての表現方法を探す
各種検証
スクリーンリーダー
VoiceOver(MacOS+Chrome)
デフォルト
「・」（行等記号）の読みが入る
- リスト２項目
- ・ リスト要素１、２の１
- ・ リスト要素２、２の２
- リストの終わり
サンプル１
「・」（行等記号）の読みが入らない
- リスト２項目
- リスト要素１、２の１
- リスト要素２、２の２
- リストの終わり
サンプル２
「・」（行等記号）の読みが入らない
- リスト２項目
- リスト要素１、２の１
- リスト要素２、２の２
- リストの終わり
VoiceOver(MacOS+Safari)
デフォルト
「・」（行等記号）の読みが入る
- リスト２項目
- ・ リスト要素１、２の１
- ・ リスト要素２、２の２
- リストの終わり
サンプル１
リストとして認識されていない
- リスト要素１
- リスト要素２
サンプル２
リストとして認識されていない
- リスト要素１
- リスト要素２
ChromeVox
キー操作
キー操作自体には問題はない。 Tabキーを押すと、summary要素、a要素のそれぞれにフォーカスを移せる。
結論
MDNの記事
にあるように、list-style, list-style-type によりリスト要素として認識されなくなる。
ただこれは調べる限りだと意図的にそうしているらしく、「わざわざリストであることを伝える必要があるのか？」と 言うことを考える必要がある。
リストであることを意図して伝えたい場合は、ARIA-roleを使えば問題ないようである。