Is my form laid out in a table accessible?

Question

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.

Answer 1

I think you're going to need individual labels for each of the checkboxes, but you may be able to use the headers attribute on the table cells to accomplish the same effect.

Answer 2

Ok using the "ID" and "Headers" attributes in tables (scroll down to 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>

Answer 3

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.