Is my form available in the table?

I am making a college search form based on the proposed sports programs and sports division. I laid out the form in the table. The "All units" checkbox selects all the checkboxes for this sport.

I know that screen programs have both form and table mode. Is my current project available or should I add labels for each individual checkbox and place them off-screen for visual users? It must also comply with the requirements laid down in section 508.

The current code for the tables is as follows:

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

What I want to know is whether a screen reader is capable of linking table headers using checkboxes.

+3
3

. html- firefox 3.0, Internet Explorer 7 Jaws 10.0 .

+2

, , headers .

0

Ok using the "ID" and "Headings" attributes in the tables (scroll down to the section).

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

Source: https://habr.com/ru/post/1711362/


All Articles