aria-relevant beim Ersetzen ganzer Tabelleninhalte

Question

Ich teste einige meiner Barrierefreiheitsimplementierungen mit JAWS und habe festgestellt, dass bei einer meiner Tabellen trotz der Verwendung von jedes Mal die gesamte Tabelle gelesen wird, wenn eine Zeile hinzugefügt wird aria-relevant=additions.

Das relevante Markup lautet wie folgt:

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

Jetzt erfolgt der Code zum Aktualisieren der Tabelle über eine AJAX-Anfrage, die alle Kommentare abruft und in die Tabelle einfügt tbody:

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

Der erste Kommentar würde also beispielsweise Folgendes zurückgeben:

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

Bei zwei Kommentaren würden die Daten wie folgt aussehen:

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

Bei jeder Aktualisierung wird die gesamte Tabelle ausgelesen, während ich nur möchte, dass die neu hinzugefügten Zeilen gelesen werden.Tatsächlich wird alle 10 Sekunden die gesamte Tabelle ausgelesen, auch wenn keine neuen Zeilen hinzugefügt werden!Ich weiß, dass das Voranstellen von Zeilen verwendet wird .prepend() ist eine Möglichkeit, aber es wäre nicht möglich, nur neue Zeilen vom Server abzurufen.

Gibt es eine Möglichkeit, trotzdem alle Zeilen vom Server abzurufen und den Bildschirmleser anzuweisen, nur die neuen Zeilen zu lesen?

Answer 1

Die beste Lösung wäre, nur die neuen Zeilen vom Server abzurufen, da die Antwort kleiner und wahrscheinlich schneller wäre.Wenn dies jedoch nicht möglich ist, können Sie die alten Zeilen aus dem DOM abrufen und sie mithilfe der Ersetzungsmethode von den vom Server abgerufenen Daten subtrahieren.Dann könnten Sie prepend verwenden, um nur die neuen Zeilen zum DOM hinzuzufügen, was dazu führen sollte, dass JAWS nur die neuen Zeilen ankündigt.

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