HTML・アクセシビリティツール

無料 ARIA Notifyスニペットジェネレーター

aria-liveフォールバック付きのプログラムによるスクリーンリーダー通知のためのariaNotify()呼び出しを生成します。

ツールを読み込み中...

ARIA Notifyスニペットジェネレーターとは

ARIA Notify API(Chrome 141+)は、動的コンテンツ変更を支援技術に通知するプログラム的な方法を提供します。aria-liveリージョンを手動で作成および管理する代わりに、ariaNotify('message', { priority, duration, silent })を呼び出します。APIは通知キュー、優先順位付け、Promiseベースの完了を処理します。これにより、aria-liveリージョンのtextContentを切り替えてスクリーンリーダー通知をトリガーする一般的なパターンを置き換えます。

クイックアンサー

ariaNotify('message', { priority, duration })を使用して、コンテンツをスクリーンリーダーにプログラム的に通知します。通知が完了すると解決されるPromiseを返します。Chrome 141+。フォールバック:古いブラウザにはaria-liveリージョンを使用してください。

Last updated: 2026-06-03

制限事項

  • ARIA Notify APIはChrome 141+のみです。FirefoxとSafariはまだサポートしていません。クロスブラウザアクセシビリティには、従来のaria-liveリージョンへのフォールバックが必要です。
  • ariaNotify()はimportant優先度の通知にユーザーアクティベーションが必要です。呼び出しはユーザージェスチャ(クリック、キー押下)内にある必要があります。そうでない場合、優先度はnormalに下げられます。
  • 複数の急速な通知はブラウザによって統合またはドロップされる可能性があります。このAPIはストリーミングリアルタイム更新ではなく、時折の動的通知用に設計されています。

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

使い方

  1. 通知メッセージと優先度レベル(normal、important、none)を選択します。
  2. ミリ秒単位の期間を設定するか、0で手動クリアとします。
  3. 適切なトリガーポイント(フォーム送信、非同期完了時など)でariaNotify()を呼び出します。
  4. APIをサポートしていないブラウザ向けにaria-liveリージョンへのフォールバックを含めます。

主な用途

  • AJAX保存完了後に、フォーム送信結果をスクリーンリーダーユーザーに通知します。
  • 無限スクロールやライブ更新で読み込まれた新しいコンテンツをユーザーに通知します。
  • タイマーが期限切れになったときやバックグラウンドタスクが完了したときに、支援技術ユーザーに警告します。

用途

使用例

フォーム送信フィードバック

フォームがfetch()で送信されます。レスポンス後、ariaNotify('フォームが正常に保存されました', { priority: 'normal' })が結果をスクリーンリーダーに通知します。ユーザーはステータスメッセージに移動する必要はありません。通知がユーザーに届きます。

ライブコンテンツ更新通知

ダッシュボードが30秒ごとに新しいデータを読み込みます。各更新後、ariaNotify('ダッシュボードが5つの新しいアイテムで更新されました', { priority: 'none', silent: true })が現在のスクリーンリーダー出力を中断しないバックグラウンド通知を提供します。

よくあるミス

  • ariaNotify()を頻繁に呼び出しすぎる。急速な通知はスクリーンリーダーユーザーを圧倒する可能性があります。重要なものをキューに入れ、非重要な更新はデバウンスしてください。
  • すでにネイティブフィードバックがあるユーザートリガーアクションにariaNotify()を使用する。ボタンクリックやフォーム送信には、多くの場合組み込みのスクリーンリーダーフィードバックがあります。
  • 古いブラウザ向けのフォールバックを含め忘れる。APIはChrome 141+のみのため、FirefoxやSafariユーザー向けにaria-liveリージョンをフォールバックとして維持してください。

検証

  1. スクリーンリーダー(VoiceOver、NVDA、ChromeVox)を有効にし、ariaNotify呼び出しをトリガーします。メッセージが正しく通知されることを確認します。
  2. サポートしていないブラウザ(Firefox)でテストし、aria-liveリージョンのフォールバックがメッセージを通知することを確認します。

FAQ

ARIA NotifyスニペットジェネレーターのFAQ

ariaNotifyはaria-liveリージョンとどう違いますか?

ariaNotify()はプログラム的なAPIです。何かを通知したいときにJavaScriptで直接呼び出します。aria-liveリージョンは、テキストコンテンツが変更されるたびに通知するDOM要素です。ariaNotify()はキューイング、優先順位、タイミングを自動的に処理します。aria-liveリージョンは手動のDOM操作が必要で、重複通知、更新の見逃し、タイミングの問題が発生しがちです。

優先度レベルは何を意味しますか?

normal通知は、現在のスクリーンリーダー出力が終了するのを待ってから再生されます。important通知は現在の出力を即座に中断します。none(サイレント)通知は中断しませんが、ユーザーが後で確認できるように利用可能です。importantは控えめに使用してください。エラーや時間に敏感な警告などの重要なアラートのみに使用します。

ariaNotifyのPromiseはいつ解決されますか?

Promiseは、支援技術がメッセージの通知を終了したときに解決されます。スクリーンリーダーがアクティブでない場合は、即座に解決されます。これにより、通知を連鎖させたり、ユーザーがメッセージを聞いた後にアクションを実行したりできます。await ariaNotify('Saved')により、次の通知が重ならないことが保証されます。

関連ツール

その他のhtml・アクセシビリティツール

こちらもお試しください

こちらもお試しください

CSS・デザインツール

CSSカルーセルジェネレーター

scroll-snap、スクロールボタン、スクロールマーカー、アクセシブルなリスト構造を備えたネイティブCSSカルーセルを生成します。JavaScriptは不要です。

ツールを開く