3

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.

4

3 回答 3

2

它是可访问的。我将代码复制到一个 html 文档中，并且能够使用 Jaws 10.0 版作为屏幕阅读器在 Firefox 3.0 和 Internet Explorer 7 中读取带有标题的复选框。

于 2009-06-26T22:56:09.423 回答
0

好的，在表格中使用“ID”和“标题”属性（向下滚动到部分）。

<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>
于 2009-06-26T20:56:29.167 回答
0

我认为每个复选框都需要单独的标签，但是您可以使用表格单元格上的headers属性来实现相同的效果。

于 2009-06-26T19:34:42.543 回答