WAI-ARIA
Accessible Rich Internet Applications
NVDA の Live Region 対応
since 2022-12-03
-
- NVDA can't catch aria-live attribute with chrome in certain situation with button text
-
- Live regions not announced correctly
-
- Regions with assertive or polite aria-live attributes are not voiced when created
freeeアクセシビリティー・ガイドライン
- ページのロード時にARIAライブ・リージョンが存在しないと読み上げられない
MDN
- ARIA ライブリージョン
- 英語では更新されているという話
- WAI ARIA ライブリージョン/API 対応
- Screen Reader 実装者ガイド
TPG
W3C
2014年以前の記事
- ユーザーエージェント実装ガイド（日立製作所による日本語訳）
- 音声ガイド付き動画の試験配信 広島市
- 今年Webアクセシビリティで実践したり考えたりしたこと (Another Sky)
- Support aria-atomic and aria-busy live region attributes for Mozilla (NVDA 2014.1から対応)
関連
事例
- 過去に確認した情報 http://www.yahoo.com/ で使われている。検索ボックスの上のタブの選択、メニューの並べ替えなど。
概要
- ロール（役割）
- ステート（状態）
- プロパティ（補足情報）
to be written
- landmark と role
- aria-hidden
- aria-live
Live Region のサンプル
since 2011-01-26
下記を Firefox で試す。3秒おきに text2 が更新される。nvdajp を使うと3秒おきに数字を読み上げる。
- 2014-02-24 すこし修正した。
<html lang="ja"> <head> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var timeoutID = null; function updateText() { count = parseInt($("#text1").text()) + 1; $("#text1").text( count ); if (count % 3 == 0) { $("#text2").text( count ); } timeoutID = window.setTimeout(updateText, 1000, true); } $("#button1").click(function(){ timeoutID = window.setTimeout(updateText, 1000, true); }); $("#button2").click(function(){ window.clearTimeout(timeoutID); }); }); </script> </head> <body> <input type="button" id="button1" value="start"/> <input type="button" id="button2" value="stop"/> <div id="text1" aria-live="off">0</div> <div aria-atomic="true" aria-live="assertive"> 時間 <span id="text2">0</span> 秒 </div> </body> </html>
NVDA + Firefox
NVDA 2014.1 にて（たぶん）：
- aria-live="assertive" と aria-live="polite" の動作に違いはない（読み上げ中の割り込みができないので）
- aria-atomic="true" が使えるようになる。#text2 を更新したら「時間 3 秒」のように通知される。
<div aria-atomic="true" aria-live="assertive"> 時間 <span id="text2">0</span> 秒 </div>
- aria-busy が使えるようになる。
- aria-live と lang の組み合わせがきいていないようだ。下記の例ではレビューカーソル移動すると time 10 second などと英語音声エンジンで読むが、ライブリージョンとしては日本語音声エンジンで読んでいる。
<div aria-atomic="true" aria-live="assertive" lang="en"> time <span id="text3">0</span> second </div>
