概要
| 日付 | macOS | Chrome | スクリーンリーダー |
|---|---|---|---|
| 2025年7月24日 | 15.5 | 138.0.7204.169 | VoiceOver |
macのChromeでVoiceOverを使って読み上げを確認したところ、dialogのaria-labelledbyが読み上げられませんでした。
ざっくりですが、HTMLは以下のようになっていました。
<button type="button" command="show-modal" commandfor="dialog">Open Dialog</button>
<dialog aria-labelledby="title">
<h1 id="title" class="sr-only">title</h1>
<button type="button" command="close">Close Dialog</button>
</dialog>
- Safari
- Firefox
- android Chrome + Talkback
では問題なくダイアログのタイトルが読み上げられていました。
結局どうしたか
今回タイトルを画面上に表示する意味がほとんどないようなコンテンツだったのでh1はdisplay: none;としてしまっても良かったのですが、
そうしてしまうとChromeでなんのダイアログなのかの情報に全くアクセスできなくなってしまうため、見出し要素にはclass="sr-only"を使用することにしました。
その他のブラウザで若干読みあげられすぎな気はしましたが、バグが修正されるまではこのままにしておこうと思います。
こうやるともっと良い、実はこうすればその現象は起こらない
などの情報があればコメントで共有ください🙏