11
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

role="status"のメッセージが読み上げられない!?

Posted at

起こったこと

HTMLの構造を変えた結果、role="status"内のメッセージがスクリーンリーダーに通知されなくなった。

role="status"

role="status"を持つ要素内のコンテンツの変更がスクリーンリーダーに通知されるようにするためには、当たり前ですが
role="status"を持つ要素がアクセシビリティツリー状に存在すること」
という条件があります。

これだけ見ると「?何言ってんだ」と思いますが、今回はこれに引っかかりました。

dialog(aria-modal="true"

結論からいうと、犯人はこいつでした。

dialog要素はshowModal()メソッドで呼び出された時にaria-modal="true"を指定したのと同じことになり、
さらにブラウザが対応していればdialog以外のコンテンツがinert属性で不活性化された状態と同じになります。

dialog要素の説明に上記の説明が書いてあります。
詳しく知りたい人は読んでみてください。

つまり、これによりdialogの外側にはrole="status"を持つ要素は存在しなくなります。

dialogaria-modal="true")がアクティブな状態で、その外にrole="status"を置いた状態で中のテキストを変えてもメッセージが読み上げられないということです。

もともとaria-modal="true"の中に置いていたスクリーンリーダーへの通知を担う責務を持つコンポーネント(role="status")をbody直下に移動した関係で、読み上げられなくなってしまっていたというオチでした。

自分で体験してみたい人もいると思うので用意しておきました。
スクリーンリーダーで体験してみてください。
https://shamokit.com/examples/a11y/role-status-dialog

最初からアクセシビリティツリーを見ていれば、あるいはこの辺の理解がちゃんとできていればもう少し早く気づけたかもしれません。

同じ状況になった人のために記事として残しておきます。

11
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?