起こったこと
HTMLの構造を変えた結果、role="status"
内のメッセージがスクリーンリーダーに通知されなくなった。
role="status"
role="status"
を持つ要素内のコンテンツの変更がスクリーンリーダーに通知されるようにするためには、当たり前ですが
「role="status"
を持つ要素がアクセシビリティツリー状に存在すること」
という条件があります。
これだけ見ると「?何言ってんだ」と思いますが、今回はこれに引っかかりました。
dialog(aria-modal="true"
)
結論からいうと、犯人はこいつでした。
dialog要素はshowModal()
メソッドで呼び出された時にaria-modal="true"
を指定したのと同じことになり、
さらにブラウザが対応していればdialog
以外のコンテンツがinert
属性で不活性化された状態と同じになります。
dialog
要素の説明に上記の説明が書いてあります。
詳しく知りたい人は読んでみてください。
つまり、これによりdialog
の外側にはrole="status"
を持つ要素は存在しなくなります。
dialog
(aria-modal="true"
)がアクティブな状態で、その外にrole="status"
を置いた状態で中のテキストを変えてもメッセージが読み上げられないということです。
もともとaria-modal="true"
の中に置いていたスクリーンリーダーへの通知を担う責務を持つコンポーネント(role="status"
)をbody直下に移動した関係で、読み上げられなくなってしまっていたというオチでした。
自分で体験してみたい人もいると思うので用意しておきました。
スクリーンリーダーで体験してみてください。
https://shamokit.com/examples/a11y/role-status-dialog
最初からアクセシビリティツリーを見ていれば、あるいはこの辺の理解がちゃんとできていればもう少し早く気づけたかもしれません。
同じ状況になった人のために記事として残しておきます。