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

ARIA Notifyについて

Avatar for ryokatsuse ryokatsuse
April 19, 2026
Technology
220
1

ARIA Notifyについて

Avatar for ryokatsuse

ryokatsuse

April 19, 2026

More Decks by ryokatsuse

See All by ryokatsuse
inferと仲良くなる10分間
Avatar for ryokatsuse ryokatsuse
1
440
アクセシビリティの自動テストはどのように行われているのか？ axe-coreの処理を巡る旅
Avatar for ryokatsuse ryokatsuse
0
720
友達ではなく仲間とはなにか？ 〜『映像研には手を出すな！』から学ぶ仕事の取り組み方〜
Avatar for ryokatsuse ryokatsuse
0
780
shadcn/uiで考えるコンポーネント設計
Avatar for ryokatsuse ryokatsuse
7
2.3k
ゆめみのアクセシビリティの現在地と今後
Avatar for ryokatsuse ryokatsuse
4
2.7k

Other Decks in Technology

See All in Technology
プライバシー保護の理論と実践
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
240
「ちゃんとやっている」は独りよがりだった ― 不安に寄り添うインシデント対応へ / Towards incident response that addresses anxieties
Avatar for mekka chmikata
1
380
本当の”仕事”を手放せる未来が見えた
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
0
220
#エンジニアBooks 30分でわかる
「技術記事を書く技術」 / engineer-books 2026-06-30
Avatar for Junichi Ito jnchito
1
180
美しいコードを書くためにF#を学んでみた話
Avatar for yud0uhu yud0uhu
1
150
5分でわかるDuckDB Quack
Avatar for chanyou0311 chanyou0311
4
310
cccccc
Avatar for moznion moznion
0
1.7k
SRE Lounge Hiroshimaへの招待
Avatar for gr1m0h grimoh
0
150
なぜ私たちのSREプラクティスはなかなか機能しないのか 〜システムより先に組織を見る〜 / Why our SRE practices aren't really working
Avatar for VTRyo vtryo
0
570
AIに障害切り分けを全部やってもらった。 。 。 。
Avatar for estie | エスティ estie
0
350
初めてのDatabricks勉強会
Avatar for Takaaki Yayoi taka_aki
2
230
アラート調査向けAIエージェントの本番導入とその後/AI Agents for Alert Investigation: Production Deployment and After
Avatar for SadayoshiTada taddy_919
1
370

Featured

See All Featured
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
250
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
550
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
810
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
2
13k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
380
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
280
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
270
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.2k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
240
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.2k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
800

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: [email protected] 件名: 来週のミーティングについて 田中さん お疲れ様です。 来週の定例ミーティングですが、 火曜日の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