概要と目的
ここでは、detailsタグ（及び summaryタグ）についての検証を行う
- summaryタグにインタラクティブ要素（例: aタグ）を用いることの問題
- インライン要素を用いてもダメかの確認
- アコーディオンとしての表現方法を探す
各種検証
スクリーンリーダー
VoiceOver(MacOS+Chrome)
デフォルト
きちんと読まれていることがわかる。
- デフォルト、下位項目が折りたたまれました、三角形の展開ボタン、グループ
- デフォルト、字間広く、三角形の展開ボタン、グループ
サンプル１
サマリー要素として読まれる。 操作者はリンクがあることを認識できないし、リンクを操作することもできない。
- サンプル１ : summary全体がaタグ、下位項目が折りたたまれました、三角形の展開ボタン、グループ
- サンプル１ : summary全体がaタグ、字間広く、三角形の展開ボタン、グループ
サンプル２
サマリー要素として読まれる。 操作者はリンクがあることを認識できないし、リンクを操作することもできない。
- サンプル２ : summaryの一部にリンク挿入[link]、下位項目が折りたたまれました、三角形の展開ボタン、グループ
- サンプル２ : summaryの一部にリンク挿入[link]、字間広く、三角形の展開ボタン、グループ
ChromeVox
キー操作
キー操作自体には問題はない。 Tabキーを押すと、summary要素、a要素のそれぞれにフォーカスを移せる。
結論
`summary`タグは `role="button"` であるため、中にインタラクティブ要素を入れても無視されることになる。
`summary` 内は、純粋なテキストのみにしておくべきだろう。
親子関係があるカテゴリ一覧を details, summary を使ってアコーディオンにする場合は、 親となる要素を summary にリンク付きで入れるのではなく、親要素のテキストは summary に入れ、 リンク要素は格納要素内に別に作るべきだろう。
これなら親子関係を維持しつつ、親カテゴリにもリンクを付与することができる。