目次

WAI-ARIA

Accessible Rich Internet Applications

NVDA の Live Region 対応

since 2022-12-03

freeeアクセシビリティー・ガイドライン

MDN

TPG

W3C

2014年以前の記事

関連

事例

概要

to be written

Live Region のサンプル

since 2011-01-26

下記を Firefox で試す。3秒おきに text2 が更新される。nvdajp を使うと3秒おきに数字を読み上げる。 

<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 にて（たぶん）： 

<div aria-atomic="true" aria-live="assertive">
時間 <span id="text2">0</span> 秒
</div>
<div aria-atomic="true" aria-live="assertive" lang="en">
time <span id="text3">0</span> second
</div>