やらねば.com

aria-live 属性の動作検証

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

aria-live 属性の適用

aria-live 属性は javascript 等で動的に変化するコンテンツの情報を、その情報に直接フォーカスを当てる事なくスクリーンリーダーに伝える事が出来ます。
aria-live 属性を追加した要素の領域、ライブ領域・ライブリージョンの情報をどの様に伝えるかを制御するプロパティとして、"off"、"polite"、"assertive"が有り、デフォルトは"off"です。

"assertive"を必要とする緊急性の高い警告やエラーはまず出さない様にする事が先決で、通常は aria-live="polite" でカバー出来るケースが殆どです。

aria-live 属性の対応状況

Microsoft Edge 89 を利用してスクリーンリーダー Windows ナレーター 20H2適用、NVDA Version 2020.4jp、PC-Talker 10 Version 1.42 で動作確認をしたところ、それぞれ異なる挙動をとりました。
ライブ領域の一部を textContent で置き換える等した場合、その部分だけを読み上げる、それ以降を読み上げる、又はその部分を含むライブ領域全体を読み上げるといった様にスクリーンリーダーによって挙動が異なります。
これらを統一する為には aria-atomic 属性を併用する等して制御する必要が有るかもしれません。

aria-live の動作確認

以下の更新ボタンを押す度に表示が現在の時刻に置き換わり、フォーカスが当たらなくてもスクリーンリーダーで時刻が読み上げられます。

<p aria-live="polite">Time: <span id="clock">00:00:00</span></p>

span 要素内を置き換えていますが、ライブ領域のどの部分を読み上げるかはスクリーンリーダーに依存します。
リアルタイムに更新させるとスクリーンリーダーではそのページの他の操作が困難になるので、必要なコンテンツのみにライブ領域を指定する事が重要です。

Time: 00:00:00