relevante para aria al reemplazar el contenido completo de la tabla

Question

Estoy probando algunas de mis implementaciones de accesibilidad usando JAWS y noté que para una de mis tablas, se lee toda la tabla cada vez que se agrega una fila, a pesar del uso de aria-relevant=additions.

El marcado relevante es el siguiente:

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

Ahora el código para actualizar la tabla se realiza a través de una solicitud AJAX que extrae todos los comentarios y los coloca en el tbody:

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

Entonces el primer comentario regresaría, por ejemplo:

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

Cuando hay dos comentarios, los datos se verían así:

<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 se produce una actualización, se lee la tabla completa, mientras que yo solo quiero que se lean las filas recién agregadas.De hecho, la tabla completa se lee cada 10 segundos incluso cuando no se agregan nuevas filas.Sé que anteponer filas usando .prepend() Es una posibilidad, pero no sería factible recuperar solo filas nuevas del servidor.

¿Hay alguna manera de recuperar todas las filas del servidor y decirle al lector de pantalla que lea solo las filas nuevas?

Answer 1

La mejor solución sería recuperar solo las nuevas filas del servidor, ya que la respuesta sería más pequeña y probablemente sea más rápida.Sin embargo, si esto es imposible, podría obtener las filas viejas de la DOM y restarlas de los datos recuperados del servidor utilizando el método Reemplazar.Luego, podría usarate para agregar solo las nuevas filas a la DOM, que debe resultar en las mandíbulas que anuncian solo las nuevas filas.

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