ARIA Notifyについて

ARIA Notifyについて CA11Y #3 〜アクセシビリティのLTしようぜ〜 2026/04/20

ARIA live regions（ライブリージョン）支援技術（スクリーンリーダーなど）に対して、視覚的な内容の変化をユーザーに通知できるもの。以下の4つがあります。 aria-live aria-atomic aria-relevant aria-busy 目的
ユーザーにコンテンツの更新を通知できる。 WAI-ARIAライブリージョンの基礎

aria-liveの例 1 2 3 4 5 6 
<div id="notification" aria-live="polite" class="visually-hidden"> </div> // DOMの中身を変更すると、スクリーンリーダーが変更を読み上げる notification.textContent = "保存しました"; aria-live="polite" はユーザーが操作を終えたあとに通知する。 "assertive" は他の操作をしているときでも即座に割り込んで通知する。

チャット田中おはようございます田中今日のミーティングは何時？自分 14時からです田中了解！ありがとうよろしくお願いし...
new 「14時からです」とメッセージを送信する「よろしくお願いします」とチャット欄に入力「了解！ありがとう」というメッセージが届く aria-liveが通知を受け取る（assertiveを設定）ユーザーが入力している時でもスクリーンリーダーが「了解！ありがとう」と読み上げる

ARIA live regionsのつらみ HTMLで隠し要素のハックをしないと実現出来ない場合があってウザい😨 aria-live="assertive"を使いすぎるとユーザーが操作している最中に何度も割り込んでくることがあり疲弊😱 スクリーンリーダーによって挙動が異なることがあって発狂🤬🤬🤬🤬 詳しくは以下のコンテンツにまとまっています。 aria-live がうるさい
これらのつらみを解決するのがARIA Notify！

ARIA Notify 1 2 3 4 5 6 // 基本の使い方
document.ariaNotify("保存しました"); // 要素から呼ぶこともできる element.ariaNotify("3件のエラーがあります"); // 緊急の通知は high で割り込み element.ariaNotify("接続が切れました", { priority: "high" }); JavaScriptのAPIから好きなタイミングで読み上げしてほしい内容を支援技術に読ませるもの。ライブリージョンとは異なりDOMに依存せずに使える。 Document から呼ぶと <html> の lang属性で読み上げ言語が決まる。 priority:normal は現在の読み上げの後、high は即座に割り込んで読み上げる。

メール作成 To: [email protected] 件名: 来週のミーティングについて田中さんお疲れ様です。来週の定例ミーティングですが、火曜日の14時に変更可能でしょうか。ご確認よろしくお願いいたします。
| 送信する送信中... ! 送信に失敗しました。接続を確認してくださいメールを作成して送信ボタンを押す送信中ボタンに変わる送信に失敗したトーストが表示される ariaNotifyを呼び出す「送信に失敗しました。接続を確認してください」と読み上げる

ARIA Notifyが使えそうなシーンショッピングカートに商品が追加されたときスライドのプレゼンテーションモードでページ送りリッチエディタなどで、Ctrl+Bを押下して文字がBoldになったことを通知フォームの入力中のリアルタイムバリデーション電車のリアルタイム運行で最寄り駅に電車が到着するときに通知本当はこれを作ってデモしたかった！！

ARIA Notifyとライブリージョンの関係性 ARIA Notifyは、視覚的なライブリージョンが不要なシナリオでのライブリージョンを置き換えるもの。隠し要素にライブリージョンを設定してアナウンスさせるようなハックを、ARIA Notifyで置き換えられる。ライブリージョンそのものを廃止するわけではない。ライブリージョンの通知は、ARIA Notifyの通知より常に優先される。
ARIA live regions ARIA Notify 視覚的な領域あり画面にも更新が表示される例：・チャットの新着メッセージ・検索結果の更新・株価や試合スコアの更新視覚的な領域なし通知のみを支援技術に届ける例：・操作の成否の通知・キーボード操作の確認・エラーやトースト通知 https://developer.mozilla.org/en-US/docs/Web/API/Document/ariaNotify https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Accessibility/AriaNotify/explainer.md

ARIAの仕様としても史上初の命令的なAPI これまでのARIAはすべて宣言的だった。 HTMLにaria-checked="true" と書く。 JavaScriptでelement.ariaChecked = "true" と設定する。どちらも「要素の状態を宣言的に記述する」もの ARIA
Notifyは命令的。 document.ariaNotify() とメソッドを呼ぶ。「今この瞬間、これを読んで」と支援技術にお願いする。今までは宣言的なものしかなくARIAMixinというスペックに定義されていた。 ARIA 1.3（Draft）ではARIANotifyMixinという新しいスペック定義が新設された。 https://w3c.github.io/aria/#ARIANotifyMixin

まとめライブリージョンはつらい ARIA Notifyは、支援技術に好きなタイミングで「これ読んで」と直接お願いできるAPI ARIA Notifyはライブリージョンを必ずしも置き換えるものではない ARIA Notifyは、ARIA仕様の中で史上初の命令的なAPI

ご清聴ありがとうございました！ infixer Timee, Inc. X(Twitter) GitHub Cosense Bluesky

ARIA Notifyについて

ARIA Notifyについて

ryokatsuse

More Decks by ryokatsuse

Other Decks in Technology

Featured

Transcript

ARIA Notifyについて CA11Y #3 〜アクセシビリティのLTしようぜ〜 2026/04/20

ARIA live regions（ライブリージョン）支援技術（スクリーンリーダーなど）に対して、視覚的な内容の変化をユーザーに通知できるもの。以下の4つがあります。 aria-live aria-atomic aria-relevant aria-busy 目的

aria-liveの例 1 2 3 4 5 6

チャット田中おはようございます田中今日のミーティングは何時？自分 14時からです田中了解！ありがとうよろしくお願いし...

ARIA Notify 1 2 3 4 5 6 // 基本の使い方

メール作成 To: [email protected] 件名: 来週のミーティングについて田中さんお疲れ様です。来週の定例ミーティングですが、火曜日の14時に変更可能でしょうか。ご確認よろしくお願いいたします。

ARIAの仕様としても史上初の命令的なAPI これまでのARIAはすべて宣言的だった。 HTMLにaria-checked="true" と書く。 JavaScriptでelement.ariaChecked = "true" と設定する。どちらも「要素の状態を宣言的に記述する」もの ARIA

ご清聴ありがとうございました！ infixer Timee, Inc. X(Twitter) GitHub Cosense Bluesky