概要と目的
ここでは、dialogについての検証を行う
- `aria-controls` の影響
- `popovertarget(popovertargetaction) の影響`
- ダイアログ展開時のフォーカスや読み上げ範囲
各種検証
スクリーンリーダー
VoiceOver(MacOS+Chrome)
最小構成
VoiceOver(MacOS+Safari)
ChromeVox
最小構成
ダイアログが展開すると、フォーカス可能なボタン要素に自動的に移動
- ダイアログを開く ボタン
- ダイアログ 閉じる ボタン
サンプル１：aria-control
上記と変化なし
- ダイアログを開く ボタン
- ダイアログ 閉じる ボタン
サンプル２：popovertarget
中にある labeled-by 属性にした要素を、ダイアログ展開時に読み上げた
- ダイアログを開く ボタン
- ダイアログの要素です ダイアログ 閉じる ボタン
サンプル３：aria-haspopup
展開前にボタンが「ポップアップあり」であることを伝えている
- ダイアログを開く ボタン ポップアップあり
- ダイアログの要素です ダイアログ 閉じる ボタン
全てに言えることだが、閉じるボタンにフォーカスを当ててしまうと、
`labeled-by` で指定した要素の読み上げはされるが、その他の情報は伝わらない。
スクリーンリーダー利用者は結局前に戻ってダイアログの中身を確認する必要が生じている。
キー操作
キー操作自体には問題はない。
結論
***
note: トークン指定は `menu` か `dialog` になるか？
使うべきでないと判断、これはラベルが既にある場合は「メニューボタン メニューポップアップ」と読み上げられてしまう。
`true` のみだといいのかも？