概要と目的
ここでは、インラインSVGについての検証を行う
- text, title 要素による差異(読み上げ、AOM)
- role="img", role="graphics-symbol img" の差異(読み上げ、AOM)
- ラベル、aria-label、title どれがいいのか?
各種検証
スクリーンリーダー
VoiceOver(MacOS+Chrome)
デフォルト
きちんと読まれていることがわかる。
- デフォルト、下位項目が折りたたまれました、三角形の展開ボタン、グループ
- デフォルト、字間広く、三角形の展開ボタン、グループ
VoiceOver(MacOS+Safari)
ChromeVox
キー操作
キー操作自体には問題はない。 Tabキーを押すと、summary要素、a要素のそれぞれにフォーカスを移せる。
結論
***