aria-important при замене всего содержимого таблицы

Question

Я тестирую некоторые из моих реализаций доступности, используя JAWS, и заметил, что для одной из моих таблиц вся таблица читается каждый раз, когда добавляется одна строка, несмотря на использование aria-relevant=additions.

Соответствующая разметка выглядит следующим образом:

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

Когда есть два замечания, данные будут выглядеть следующим образом:

<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. Затем вы можете использовать prepend для добавления только новых строк в DOM, что должно привести к тому, что JAWS объявит только новые строки.

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