Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is my form laid out in a table accessible?

I am making a form to search for colleges based on athletic programs offered and the division of the sport. I have laid the form out in a table. The "all divisions" checkbox selects all the checkboxes for that sport.

I know screen readers have both forms and tables mode. Is my current design accessible or should I add labels for each individual checkbox and position them off-screen for visual users? This also needs to meet at least Section 508 requirements.

Current code for the tables looks like this:

<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 or not a screen reader is able to associate the table headings with the checkboxes.

like image 388
tomk Avatar asked Nov 23 '25 22:11

tomk


1 Answers

It is accessible. I coppyed the code into a html document and was able to read the check boxes with headers in both firefox 3.0 and Internet explorer 7 using Jaws version 10.0 as the screen reader.

like image 102
Jared Avatar answered Nov 27 '25 20:11

Jared



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!