テストページに関する注意
このページには、テストおよびデモのために意図的にアクセシビリティ上の問題を含む実装例が含まれています。
これらの例を本番サイトで使用しないでください。アクセシビリティのガイドラインやベストプラクティスに反します。
このページは Accessibility Visualizer 拡張機能と併用することで、開発者がアクセシビリティの問題を発見・理解するのを支援する目的で作られています。
ライブリージョン
ライブリージョンは動的な内容の変化を支援技術に伝えます。状態更新やエラーなど、即時に把握すべき情報の通知に不可欠です。
aria-live 属性
aria-live="polite"
ユーザーの操作を妨げないタイミングで案内するライブリージョン。緊急性の低いステータス更新に適します。
aria-live="assertive"
変更を即座に通知し、スクリーンリーダーの読み上げを割り込みます。重要な警告やエラーに使用します。
ライブリージョンのロール
role="status"
重要度の低い案内情報を伝えるロール。aria-live="polite" と似た挙動です。
role="alert"
時間に敏感な重要情報を伝えるロール。aria-live="assertive" と似た挙動です。
output 要素
<output> 要素
計算結果やフォームの出力を表示する要素。暗黙的にライブリージョンの挙動があります。
aria-atomic 属性
aria-atomic="true" のライブリージョン
内容の一部が変化した場合でも、領域全体が読み上げられます。
問題のあるライブリージョン
ライブリージョンでない動的コンテンツ
動的に変化してもライブリージョンとしてマークされていないため、支援技術に変化が伝わりません。
Screen readers won't announce the time update because this isn't a live region.
優先度の相互作用
polite と assertive の同時更新
assertive が polite を割り込む挙動を示します。同時更新時、polite の読み上げは抑制される場合があります。
Polite (should be announced)
Assertive (will interrupt)
Test behavior: Click "Update Both Simultaneously" and observe that the polite region's announcement may be suppressed by the assertive region. The Accessibility Visualizer extension shows this behavior by only displaying the assertive announcement when both regions update at the same time.
優先度の異なる順次更新
assertive の通知が、キューにある polite の未読を打ち消す場合があることを示します。
Polite announcements
Assertive interruptions
Test behavior: Start the polite sequence to see 8 polite messages being displayed sequentially. Then click "Interrupt with Assertive" - the assertive message will be triggered after 3 seconds to avoid focusin clearing the live region display. Observe how the assertive announcement interrupts and clears the remaining polite messages.
aria-busy の抑止
aria-busy による抑止
aria-busy="true" が設定された間はライブリージョンの通知が抑制されます。内容は変化しても読み上げられません。
Live region (will be suppressed when busy)
aria-busy status:
false
Test behavior: Click "Update Content" to see normal live region announcements. Then click "Toggle aria-busy" to mark the region as busy, and try "Update Content" again - the content will change but no announcement will be made. The Accessibility Visualizer extension respects aria-busy and will not display announcements for busy regions.
継続的に更新されるライブリージョン
polite のタイマー通知
1 秒ごとに更新する polite なライブリージョン。頻繁な更新時の挙動テストに有用です。
assertive のカウンター通知
2 秒ごとに自動インクリメントする assertive なライブリージョン。割り込みの頻度が高いケースのテストに有用です。
role="status" によるステータス更新
3 秒ごとに更新されるステータスメッセージ。ロールベースのライブリージョンに対する継続更新の扱いをテストします。
ariaNotify API
ariaNotify（priority なし）
document.ariaNotify() をデフォルト priority（none）で呼び出します。DOM にライブリージョン要素を使わずに支援技術へ通知する API です。
ariaNotify（priority: "high"）
document.ariaNotify() を priority "high" で呼び出します。高優先度の通知は現在の読み上げを中断する可能性があります。
ライブリージョンとモーダルダイアログ
<dialog> の内側と外側のライブリージョン
showModal() で開いたモーダルダイアログ内のライブリージョンと、モーダルの外にあるライブリージョンです。
aria-modal の内側と外側のライブリージョン
role="dialog" aria-modal="true" のカスタムモーダル内のライブリージョンと、モーダルの外にあるライブリージョンです。