Aria- 전체 표 내용물을 교체 할 때 관련됩니다

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>

.

이제 테이블을 업데이트하는 코드는 모든 의견을 가져오고 tbody로 찍은 Ajax 요청을 통해 수행됩니다.

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에서 이전 행을 가져 와서 바꾸기 방법을 사용하여 서버에서 검색된 데이터에서 빼 할 수 있습니다.그런 다음 Prepend를 사용할 수 있으므로 새로운 행만이 새 행만 발표하는 턱을 가져와야합니다.

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

.