WAI-ARIA

概要

  • ロール(役割)
  • ステート(状態)
  • プロパティ(補足情報)

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>

wai-aria.txt · 最終更新: 2014/03/01 19:24 by Takuya Nishimoto
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0