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>

الآن يتم تنفيذ التعليمات البرمجية لتحديث الجدول من خلال طلب 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 وطرحها من البيانات المستردة من الخادم باستخدام طريقة الاستبدال.بعد ذلك، يمكنك استخدام الإضافة المسبقة لإضافة الصفوف الجديدة فقط إلى 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);