aria-live

aria-liveは、要素に変更があったときに変更内容をスクリーンリーダーで読み上げてくれたりするのでアクセシビリティに貢献する事ができます。

ライブリージョン

JavaScriptで動的に更新されたりする要素に対して、スクリーンリーダーなどの支援技術を使っているユーザーは変化に気づく事ができない事があります。 ライブリージョンを使うことで動的に更新される要素に対して、スクリーンリーダーなどの支援技術を使っているユーザーも変化を把握できるようになります。

3つの属性

assertive: 内容が更新されてもユーザーに伝達しない（デフォルト設定）

polite: 現在の読み上げの終了やユーザー入力時など適切なタイミングで、内容が更新されたときにユーザーに伝達する。

assertive: 即座に伝達を行う

使用例

文字を挿入する前

<div aria-live="assertive/polite/assertive"></div>

javascriptで文字を挿入した時

<div aria-live="assertive/polite/assertive">文字が挿入されました</div>

この時にaria-liveに設定によって「文字が挿入されました」がタイミングで読み上げられるようになります。