ariaNotify()でスクリーンリーダーに任意の文字列を読み上げさせる
ariaNotify()は、DOMを書き換えずに任意の文字列をスクリーンリーダーに読み上げさせるメソッドです。Chrome 141とFirefox 150に続いてSafari 27が対応し、Baseline 2026に加わりました。ライブリージョンとの違い、呼び出す要素の選び方、使うときの注意を整理します。
- Chrome141
- Edge141
- Firefox150
- Safari27
はじめに
エディタのショートカットで太字を切り替えたときや、バックグラウンドの保存が終わったときの変化は、画面を見ていれば伝わりますが、スクリーンリーダーの利用者には伝わりません。
これまでは、読み上げ専用の隠し要素にaria-liveを付け、伝えたい文字列をそこへ書き込んで読ませるのが定番でした。ライブリージョンはDOMの変化を読み上げる仕組みなので、読ませるためだけにDOMを書き換えていたことになります。
ariaNotify()は、DOMを介さずに文字列をスクリーンリーダーへ渡すメソッドです。Chrome 141とFirefox 150に続いてSafari 27が対応し、Baseline 2026に加わりました。
書き方
ariaNotify()はdocumentと各要素にあり、第1引数に読み上げさせる文字列を渡します。
const editor = document.querySelector('#editor');
editor.addEventListener('keydown', (event) => {
if (!(event.ctrlKey || event.metaKey) || event.key !== 'b') return;
event.preventDefault();
const isBold = toggleBold(editor);
// 見た目は太字になるが、それだけでは切り替わったことが伝わらない
editor.ariaNotify(isBold ? '太字 オン' : '太字 オフ');
});第2引数のpriorityには'normal'か'high'を指定でき、既定は'normal'です。'normal'は読み上げ中の内容が終わってから、'high'は読み上げ中の内容を中断して読まれます。aria-liveのpoliteとassertiveにあたります。
// 読み上げ中の内容を中断して読ませる
editor.ariaNotify('保存に失敗しました', { priority: 'high' });
// 特定の要素に紐づかない通知はdocumentで呼ぶ
document.ariaNotify('下書きを保存しました');入力した文字列をボタン要素のariaNotify()に渡し、priorityと祖先のlang属性を変えたときの読み上げ方をスクリーンリーダーで確認できます。
スクリーンリーダーを起動した状態でボタンを押すと、この文字列が読み上げられます
呼び出し履歴
まだ呼び出していません
ライブリージョンとの違い
ライブリージョンが読むのは、aria-liveを付けた要素の中身の変化です。読ませる文字列はその要素の中身に限られ、要素もあらかじめDOMに置いておく必要があります。挿入した直後に中身を入れると、読まれないことがあるためです。
ariaNotify()は引数の文字列をそのまま読みます。画面には件数だけを出し、読み上げでは24件に絞り込みましたと伝える、といった使い分けができます。事前に要素を用意する必要もありません。
どの要素で呼ぶか
特定のUIに関わる通知はその要素で、ページ全体に関わる通知はdocumentで呼ぶのが素直です。どちらで呼んでも読まれますが、次の2点が変わります。
1つ目は読み上げの言語です。要素で呼ぶと、その要素に最も近いlang属性の言語で読まれます。documentで呼ぶと<html>要素のlang属性の言語です。日本語のページに埋め込んだ英語のUIなら、そのUIの要素で呼べば英語の音声で読まれます。
2つ目は非表示の要素の扱いです。display: noneやhidden属性、aria-hidden="true"などでアクセシビリティツリーから外れた要素で呼ぶと、何も起きません。例外も出ないので、読まれないときは呼んだ要素が非表示になっていないかを確かめます。
使うときの注意
呼ぶ回数には気を配る必要があります。続けて呼ぶと、最後の1件しか読まれないことがあります。伝えたい内容は1回の呼び出しにまとめます。ユーザー操作が無くても呼べるので、タイマーや通信の完了を起点にもできますが、乱発すると利用者の操作を妨げます。
2026年9月時点では、読み上げられない環境もあります。macOSでは、フォーカス中の入力欄の値が変わるなど、別のアクセシビリティイベントが同時に起きると、VoiceOverがそちらを読み、通知は読まれないことがあります。ChromeOSでは、メソッドはあっても読み上げは行われません。
おわりに
ariaNotify()があれば、読み上げのためだけに隠しライブリージョンを置いて書き換える必要はありません。Chrome 141、Firefox 150、Safari 27が対応し、主要ブラウザで使えるようになりました。