再現方法
例にrole="menu"とJavaScriptで実装されたメニューがあります。
手順
- VoiceOverを起動する
- メニューボタン(Actions というラベルのボタン)をEnterキーの押下などで開き、メニュー項目を選択します。(選択せずEscapeで閉じても再現します。)
- TabキーやVOキーでキーボードフォーカスを移動し、メニュー以外の項目を読もうとします
- メニューに閉じ込められ、何も読み上げられません
再現した環境
- macOS Sequoia 15.6.1
- GoogleChrome 139.0.7258.155
多分バグ
GoogleChrome以外のブラウザ(Firefox、Safari)では再現しなかったのでおそらくバグだと思います。
すでに報告済みで、バグなのか、バグだとしたらいつ修正されるのかはわかりません。
メニューから戻るには
VOキー+command+F4 でVoiceOverカーソルをキーボードフォーカスに同期させれば戻ります。
感想
menuを実装したのが何気に初めてだったので自分の実装が悪いのか疑いました。
アクセシビリティを学ぶなかでVoiceOverを使い始めたばかり という人が助かるかもしれないと思ったので記事にしておきます。