ARIA関連テーブルの内容全体を置き換えるとき

Question

JAWSを使用して私のアクセシビリティ実装のいくつかをテストしていて、私のテーブルの1つに対して、aria-relevant=additionsを使用しても1行が追加されるたびにテーブル全体が読み取られることに気づいています。

関連マークアップは次のとおりです。

<table role=log aria-live=polite aria-relevant=additions>
    <thead>
        <tr>
            <th scope=col>Name</th>
            <th scope=col>Time</th>
            <th scope=col>Comment</th>
        </tr>
    </thead>
    <tbody id=eventComments></tbody>
</table>

.

テーブルを更新するコードは、すべてのコメントを引くAJAX要求を通して行われ、それをtbodyにプロップする：

window.setInterval(function() {
    $.ajax({
        type: 'GET',
        url: 'event.php',
        data: {
            eventID: ...
            page: 'getComments'
        },
        dataType: 'html',
        success: function(data) {
            $('#eventComments').html(data);
        }
    });
}, 10000);

.

だから最初のコメントは次のように戻るでしょう。

<tr><th scope=row>Richard</th><td>2014-01-11 01:01:00</td><td>Security check in</td></tr>

.

コメントが2つある場合、データは次のようになります。

<tr><th scope=row>Justin</th><td>2014-01-11 01:18:31</td><td>Equipment failure</td></tr>
<tr><th scope=row>Richard</th><td>2014-01-11 01:01:00</td><td>Security check in</td></tr>

.

更新が行われるたびに、テーブル全体が読み出されますが、新しく追加された行を読み取るだけです。実際、新しい行が追加されていない場合でも、テーブル全体が10秒ごとに読み出されます。 .prepend()を使用して行を前回のものが可能性があることを知っていますが、サーバーから新しい行だけを取得することは実行不可能ではありません。

は、サーバーからすべての行を取得し、スクリーンリーダーに新しい行を読み取るように指示する方法はありますか？

Answer 1

最適な解決策は、応答が小さく、おそらく速くなるため、サーバーからの新しい行だけを取得することです。ただし、これが不可能な場合は、DOMから古い行を取得し、それらをREPLACEメソッドを使用してサーバーから取得したデータからそれらを減算することができます。その後、先頭に新しい行をDOMに追加するように使用することができます。これにより、JAWが新しい行だけを発表するはずです。

window.setInterval(function() {
    $.ajax({
        type: 'GET',
        url: 'event.php',
        data: {
            eventID: ...
            page: 'getComments'
        },
        dataType: 'html',
        success: function(data) {
            // strip the old rows from the data retrieved from the server
            var oldRows = $('#eventComments').html();
            var reg = new RegExp(oldRows,"g");
            var newRows = data.replace(reg,"");
            $('#eventComments').prepend(newRows);
        }
    });
}, 10000);

.