pertinent pour l'aria lors du remplacement du contenu entier de la table

Question

Je teste certaines de mes implémentations d'accessibilité à l'aide de JAWS et j'ai remarqué que pour l'une de mes tables, la table entière est lue à chaque fois qu'une ligne est ajoutée, malgré l'utilisation de aria-relevant=additions.

Le balisage pertinent est le suivant :

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

Maintenant, le code pour mettre à jour la table est effectué via une requête AJAX qui extrait tous les commentaires et les place dans le tbody:

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

Ainsi, le premier commentaire renverrait, par exemple :

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

Lorsqu'il y a deux commentaires, les données ressembleraient à :

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

Chaque fois qu'une mise à jour se produit, la table entière est lue alors que je souhaite simplement que les lignes nouvellement ajoutées soient lues.En fait, le tableau entier est lu toutes les 10 secondes même lorsqu'aucune nouvelle ligne n'est ajoutée !Je sais que préfixer les lignes en utilisant .prepend() est une possibilité, mais il ne serait pas possible de récupérer uniquement de nouvelles lignes du serveur.

Existe-t-il un moyen de récupérer toutes les lignes du serveur et d'indiquer au lecteur d'écran de lire uniquement les nouvelles lignes ?

Answer 1

La meilleure solution serait de récupérer uniquement les nouvelles lignes du serveur, car la réponse serait plus petite et probablement plus rapide.Cependant, si cela est impossible, vous pouvez récupérer les anciennes lignes du DOM et les soustraire des données récupérées du serveur à l'aide de la méthode de remplacement.Ensuite, vous pouvez utiliser prepend pour ajouter uniquement les nouvelles lignes au DOM, ce qui devrait permettre à JAWS d'annoncer uniquement les nouvelles lignes.

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