Search code examples
formsaccessibilitysection508wcag

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.


Solution

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