Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ARIA Notifyについて

ARIA Notifyについて

Avatar for ryokatsuse

ryokatsuse

April 19, 2026

More Decks by ryokatsuse

Other Decks in Technology

Transcript

  1. 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" は他の操作をしているときでも即座に割り込んで通知する。
  2. チャット 田中 おはようございます 田中 今日のミーティングは何時? 自分 14時からです 田中 了解!ありがとう よろしくお願いし...

    new 「14時からです」とメッセージを送信する 「よろしくお願いします」とチャット欄に入力 「了解!ありがとう」というメッセージが届く aria-liveが通知を受け取る(assertiveを設定) ユーザーが入力している時でもスクリーンリーダーが「了 解!ありがとう」と読み上げる
  3. 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 は即座に割り込んで読み上げる。
  4. メール作成 To: [email protected] 件名: 来週のミーティングについて 田中さん お疲れ様です。 来週の定例ミーティングですが、 火曜日の14時に変更可能でしょうか。 ご確認よろしくお願いいたします。

    | 送信する 送信中... ! 送信に失敗しました。接続を確認してください メールを作成して送信ボタンを押す 送信中ボタンに変わる 送信に失敗したトーストが表示される ariaNotifyを呼び出す 「送信に失敗しました。接続を確認してください」と読み 上げる
  5. 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
  6. 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