タイトルは詐欺です。
ライブリージョンとは？
JSなどで動的にコンテンツを変化させた場合、視力によってコンテンツを確認しているユーザーには自明でも、スクリーンリーダーのユーザーなどにはコンテンツが変化したことがわからないことがある。ライブリージョンは動的なコンテンツの変化を支援技術を通じてユーザーに届ける技術。
実装方法
role属性にstatusもしくはalert（ライブリージョンロールと呼ばれる）を記述する。statusはスクリーンリーダーが読み上げ中のコンテンツを読み上げた後に変更されたコンテンツを読み上げる。alertは読み上げ中のコンテンツに割り込んで変更されたコンテンツを読み上げる。
また、aria-live属性というものもあり、しばしばライブリージョンロールと併用される。aria-live="polite"がstatusに相当し、aria-live="assertive"がalertに相当する。併用の理由としては「互換性を最大にする」、つまり動作する環境を増やすためっぽいけど、role="alert"とalia-live="assertive"の併用はiOSのVoiceOverで二重に読み上げられてしまうらしい。このあたりは実際に試すしかないかな。
<div role="status" aria-live="polite">この要素が変化したときにスクリーンリーダーで読み上げられる</div>
デモ
デモはこちら。コードはこちら。スクリーンリーダーはNVDA、OSはWindows10、ブラウザはGoogle Chromeで確認。スクリーンリーダーを使用するとライブリージョンの記述がある場合はサイコロを振るたびに出目が読み上げられるが、ライブリージョンの記述がないと読み上げられない。視覚情報以外の手段でコンテンツを認識するユーザーにとってはこういう実装だと困るということ。
所感
ライブリージョンの初歩ぐらいはわかったかな、という感想。あとデモに関してサイコロを振るたびに出目が読み上げられると書いたけどこれは不正確で、なぜならば二度以上続けて同じ目が出た場合に読み上げられないから。ライブリージョンは変更されたコンテンツを支援技術を通じて知らせる技術。回避できそうな気もするけど、今後の宿題ということで。
