4

我有一个如下所示的数据表:

<table><thead>
<tr>
<th><input type="checkbox" /></th>
<th scope="col">Foo</th>
<th scope="col">Bar</th><tr>
</thead>
<tbody>
<tr><td><input type="checkbox" /></td><td scope="row">a</td><td>b</td></tr>
<tr><td><input type="checkbox" /></td><td scope="row">c</td><td>d</td></tr>
</tbody></table>

我希望标题中的复选框选择正文中的所有复选框。我已经编写了 Javascript 来进行选择,它工作正常。但是,在 IE7 和 IE8 中(可能是其他浏览器,但我们不需要支持其他任何东西),标题中的复选框永远不会获得选项卡焦点,所以我们失败了 508。

有没有办法在不为所有内容设置 tabindexes 的情况下处理这个问题?

4

3 回答 3

2

正如 Jukka 在评论中所说,所有这些都需要labels. 如果没有<label>表单元素,任何 508 检查都会自动失败。这可能是它抛出的真正错误,但我们需要知道正在使用哪些工具。

要回答您的新问题:

无论如何,这里真正的问题不是它没有获得焦点,而是焦点不可见。我尝试添加标签,但没有帮助,我尝试仅向 TD 添加文本,但也没有帮助

大多数浏览器在获得焦点时会在所有元素周围放置一个 1 像素的虚线边框。浏览您的样式表,然后查找类似outline: none;. 您应该删除该行或添加重新添加焦点的新规则。

于 2012-11-28T13:55:21.577 回答
0

看起来问题实际上是沟通不畅,无论是在我们的开发团队还是在 508 合规检查器中。我唯一的借口是这件事发生在我没有带笔记本电脑过感恩节时通过电话。

无论如何,这里真正的问题不是它没有获得焦点,而是焦点不可见。我尝试添加标签,但没有帮助,我尝试仅向 TD 添加文本,但也没有帮助。一旦我确定我要问的是什么,我将把我的鸭子排成一排,然后提出一个新问题。

谢谢大家的帮助。

于 2012-11-27T17:50:55.593 回答
0

您正在寻找使复选框既实用又可见,是吗?

您不能使用更改复选框样式的 JS 创建“焦点”事件,因为复选框实际上没有任何“样式”,保存 Ryan B 提到的内容......但是您可以创建将样式更改为的“焦点”事件一个<div>包含所述复选框:

http://jsfiddle.net/ZuvbV/3/

请注意,通过选项卡将背景颜色更改为红色。

于 2012-11-30T00:42:46.880 回答