aria-atomic 属性の動作検証

WAI-ARIA で定義されている aria-atomic 属性。
スクリーンリーダーやブラウザーでどの様な挙動を取るのかの検証と、このページを使って動作の確認が出来ます。

aria-atomic 属性の適用

aria-atomic 属性は aria-live 属性によって指定されたライブ領域・ライブリージョン内において、1部のコンテンツが変更された場合に、変更されたコンテンツ部分だけをスクリーンリーダーで読み上げるか、そのコンテンツを含むライブ領域全体を読み上げるかを指定出来ます。

aria-atomic="false" がデフォルトで、変更されたコンテンツのみを読み上げます。
aria-atomic="true" で変更されたコンテンツを含むライブ領域全体を読み上げます。

aria-atomic 属性の対応状況

Microsoft Edge 89 を利用し、スクリーンリーダー Windows ナレーター 20H2適用、NVDA Version 2020.4jp、PC-Talker 10 Version 1.42 で検証したところ、期待通りの動作をしたのは NVDA のみでした。

ナレーターは aria-atomic="false" の場合、変更の有る部分から後ろを全て読み上げ、PC-Talker では “false" “true" に関わらずライブ領域全てを読み上げました。
NVDA は Firefox 87 においても期待通りの動作をし、WAI-ARIA の対応が一番進んでいると思われます。

iOS 14 VoiceOver と Safari においても期待通りに動作し、こちらも問題無く使える様です。

aria-atomic の動作確認

以下で aria-atomic に “false" と “true" をそれぞれ指定した時のスクリーンリーダーの挙動を確認する事が出来ます。

aria-atomic="false"

aria-atomic="false" の場合、以下の時刻の更新を押すと変更の有る時刻だけが読み上げられます。

時刻は 00:00:00 です。

aria-atomic="true"

aria-atomic="true" の場合、時刻の更新が有ると更新の無い日時を含めライブ領域全体が読み上げられます。

時刻は 00:00:00 です。