ARIA Notifyについて

Transcript

1. ARIA Notifyについて CA11Y #3 〜アクセシビリティのLTしようぜ〜 2026/04/20
2. ARIA live regions（ライブリージョン） 支援技術（スクリーンリーダーなど）に対して、視覚的な内容の変化をユーザーに通知できるもの。 以下の4つがあります。 aria-live aria-atomic aria-relevant aria-busy 目的 ユーザーにコンテンツの更新を通知できる。 WAI-ARIAライブリージョンの基礎
3. aria-liveの例 1 2 3 4 5 6 <!-- aria-live属性を持つ領域を用意 --> <div id="notification" aria-live="polite" class="visually-hidden"> </div> // DOMの中身を変更すると、スクリーンリーダーが変更を読み上げる notification.textContent = "保存しました"; aria-live="polite" はユーザーが操作を終えたあとに通知する。 "assertive" は他の操作をしているときでも即座に割り込んで通知する。
4. チャット 田中 おはようございます 田中 今日のミーティングは何時？ 自分 14時からです 田中 了解！ありがとう よろしくお願いし... new 「14時からです」とメッセージを送信する 「よろしくお願いします」とチャット欄に入力 「了解！ありがとう」というメッセージが届く aria-liveが通知を受け取る（assertiveを設定） ユーザーが入力している時でもスクリーンリーダーが「了 解！ありがとう」と読み上げる
5. ARIA live regionsのつらみ HTMLで隠し要素のハックをしないと実現出来ない場合があってウザい😨 aria-live="assertive"を使いすぎるとユーザーが操作している最中に何度も割り込んでくる ことがあり疲弊😱 スクリーンリーダーによって挙動が異なることがあって発狂🤬🤬🤬🤬 詳しくは以下のコンテンツにまとまっています。 aria-live がうるさい これらのつらみを解決するのがARIA Notify！
6. 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 は即座に割り込んで読み上げる。
7. メール作成 To: tanaka@example.com 件名: 来週のミーティングについて 田中さん お疲れ様です。 来週の定例ミーティングですが、 火曜日の14時に変更可能でしょうか。 ご確認よろしくお願いいたします。 | 送信する 送信中... ! 送信に失敗しました。接続を確認してください メールを作成して送信ボタンを押す 送信中ボタンに変わる 送信に失敗したトーストが表示される ariaNotifyを呼び出す 「送信に失敗しました。接続を確認してください」と読み 上げる
8. ARIA Notifyが使えそうなシーン ショッピングカートに商品が追加されたとき スライドのプレゼンテーションモードでページ送り リッチエディタなどで、Ctrl+Bを押下して文字がBoldになったことを通知 フォームの入力中のリアルタイムバリデーション 電車のリアルタイム運行で最寄り駅に電車が到着するときに通知 本当はこれを作ってデモしたかった！！
9. 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
10. 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
11. まとめ ライブリージョンはつらい ARIA Notifyは、支援技術に好きなタイミングで「これ読んで」と直接お願いできるAPI ARIA Notifyはライブリージョンを必ずしも置き換えるものではない ARIA Notifyは、ARIA仕様の中で史上初の命令的なAPI
12. ご清聴ありがとうございました！ infixer Timee, Inc. X(Twitter) GitHub Cosense Bluesky