aria-relevante ao substituir todo o conteúdo da tabela

Question

Estou testando algumas das minhas implementações de acessibilidade usando o JAWS e percebi que, para uma das minhas tabelas, a tabela inteira é lida toda vez que uma linha é adicionada, apesar do uso de aria-relevant=additions.

A marcação relevante é a seguinte:

<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>

Agora o código para atualizar a tabela é feito através de uma solicitação AJAX que extrai todos os comentários e os coloca no tbody:

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

Então o primeiro comentário retornaria, por exemplo:

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

Quando há dois comentários, os dados seriam assim:

<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>

Cada vez que ocorre uma atualização, a tabela inteira é lida, enquanto eu quero apenas que as linhas recém-adicionadas sejam lidas.Na verdade, a tabela inteira é lida a cada 10 segundos, mesmo quando nenhuma nova linha é adicionada!Eu sei que acrescentar linhas usando .prepend() é uma possibilidade, mas não seria viável recuperar apenas novas linhas do servidor.

Existe uma maneira de recuperar todas as linhas do servidor e informar ao leitor de tela para ler apenas as novas linhas?

Answer 1

A melhor solução seria recuperar apenas as novas linhas do servidor, pois a resposta seria menor e provavelmente mais rápida.No entanto, se isso for impossível, você poderá obter as linhas antigas do DOM e subtraí-las dos dados recuperados do servidor usando o método replace.Então você poderia usar prepend para adicionar apenas as novas linhas ao DOM, o que deve resultar no JAWS anunciando apenas as novas linhas.

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);