هل تم وضع النموذج الخاص بي في جدول يمكن الوصول إليه؟

Question

أقوم بعمل نموذج للبحث عن الكليات بناءً على البرامج الرياضية المقدمة وتقسيم الرياضة. لقد وضعت النموذج في طاولة. تحدد خانة الاختيار "All Division" جميع مربعات الاختيار لتلك الرياضة.

أعرف أن قراء الشاشة لديهم وضع النموذج والطاولات. هل يمكن الوصول إلى تصميمي الحالي أم يجب أن أضيف ملصقات لكل خانة اختيار فردية ووضعها خارج الشاشة للمستخدمين المرئيين؟ هذا يحتاج أيضًا إلى تلبية متطلبات القسم 508 على الأقل.

الشفرة الحالية للجداول تبدو هكذا:

<table>
        <tr><th scope="col" colspan="2">All Divisions</th>
            <th scope="col">Div I</th>
            <th scope="col">Div II</th>
            <th scope="col">Div III</th>
            <th scope="col">Other</th>
        </tr>
        <tr><th scope="row">Baseball</th>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
        </tr>                    
        <tr><th scope="row">Basketball</th>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="checkbox" /></td>
        </tr>
    </table>

ما أريد معرفته هو ما إذا كان قارئ الشاشة قادرًا على ربط عناوين الجدول مع مربعات الاختيار.

Answer 1

يمكن الوصول إليه. لقد قمت بتصميم الكود في مستند HTML وتمكنت من قراءة خانات الاختيار مع رؤوس في كل من Firefox 3.0 و Internet Explorer 7 باستخدام الإصدار 10.0 Jaws كقارئ الشاشة.

Answer 2

أعتقد أنك ستحتاج إلى ملصقات فردية لكل من مربعات الاختيار ، لكنك مايو تكون قادرة على استخدام headers ينسب على خلايا الجدول لإنجاز نفس التأثير.

Answer 3

موافق باستخدام سمات "المعرف" و "الرؤوس" في الجداول (قم بالتمرير لأسفل إلى القسم).

<table>
    <tr><th id="all" colspan="2">All Divisions</th>
        <th id="div1">Div I</th>
        <th id="div2">Div II</th>
        <th id="div3">Div III</th>
        <th id="other">Other</th>
    </tr>
    <tr><td id="baseball">Baseball</td>
        <td headers="baseball all"><input type="checkbox" /></td>
        <td headers="baseball div1"><input type="checkbox" /></td>
        <td headers="baseball div2"><input type="checkbox" /></td>
        <td headers="baseball div3"><input type="checkbox" /></td>
        <td headers="baseball other"><input type="checkbox" /></td>
    </tr>                    
</table>