arianotifyのないブラウザでも、ARIA live regionを動的に生成して通知を代替できるpolyfillが公開された。Webアプリは対応状況によらず同じAPIを呼び出せる。
欠けているarianotifyをブラウザ上で追加
GitHubのアクセシビリティ関連ライブラリであるarianotify-polyfillは、ブラウザがARIA Notification APIへネイティブ対応しているかどうかにかかわらず、arianotifyを利用できるようにする。Webアプリ側は対応状況に応じて異なる通知コードを選ぶ代わりに、同じAPIを呼び出せる。
このpolyfillは、Element.prototype.arianotifyまたはDocument.prototype.arianotifyが存在しない場合に、その関数を追加してネイティブ機能を模倣する。すでに関数が存在する環境では、ブラウザ側の実装を利用する。
ネイティブ通知とlive regionによる代替経路
ネイティブ対応ブラウザでarianotifyを呼び出すと、通知イベントが発生する。対応していないブラウザでは、追加された関数が別の処理経路を選ぶ。
代替経路は、ARIA live regionとして働く要素を生成してDOMへ挿入し、その要素のテキスト内容を通知メッセージへ書き換える。これにより、ネイティブの通知イベントがない環境でも同様の通知効果を作る。
動的な内容変化と命令型通知を分離
ARIA live regionは、Webアプリで動的に変わった内容をアクセシビリティ層へ伝えるために使われる。画面上の要素とその変化を起点として、スクリーンリーダーなどが利用できる情報を渡す。
ARIA Notification APIは、視覚的なlive regionを必要としない確認通知などを、命令型の呼び出しで扱う仕組みとして提案されている。arianotify-polyfillは、その呼び出しを非対応環境では従来のlive regionへ接続する。
npm導入後の呼び出しを本番環境まで共通化
arianotify-polyfillの実行場所はブラウザ内に限定され、サーバーでの利用は対象外となる。npmパッケージの@github/arianotify-polyfillをJavaScriptから読み込むと、その後の処理はarianotifyを呼び出せる。
GitHubは、このライブラリをgithub.comの本番環境で使用している。ネイティブ実装があるブラウザと、live regionによる代替が必要なブラウザの差はpolyfill内で処理される。