满足复杂数据表的 508 可访问性要求

Question

我正在使用 Firefox 的扩展程序来检查 508 合规性问题。在这里找到：

https://addons.mozilla.org/en-US/firefox/addon/accessibility-evaluation-toolb/

我在每份报告中都遇到了以下两个我无法解决的错误：

失败：数据表必须使用 th 元素来指示所有列或行中第一个单元格的标题单元格。

失败：对于复杂的数据表，td元素必须有headers属性指向关联的th header id。

插件突出显示了两个错误的下表单元格，但我找不到任何问题：

<table cellpadding="5"  width="100%" style ="text-align:right" class ="ecoRow" summary="Budget History" title="Budget History">

<tr> <th id="date_range"  colspan="7" style="text-align:center;">From #params.start_date# To #params.end_date#</th></tr>

怎么办？

Answer 1

我正在使用这个 firefox 扩展程序，今天遇到了同样的问题。 该工具似乎希望查看元素内的一些文本。

团队中的其他开发人员用按钮和锚点替换了纯文本标题标签。锚点与工具一起通过，但按钮没有。我们已经定义了范围和所有结束标记（我检查了）。

结果可能会有所不同，但这解决了我们的问题。 请注意，传递的行在标签之间具有实际文本。

• 失败：<th><input type="button" text="blah"></input></th>
• 失败：<th><img url="blah.jpg"></img></th>
• 通过：<th><a href="www.blah.com">blah</a></th>
• 通过：<th><span>blah</span></th>
• 通过：<th>blah</th>

Answer 2

我看到有关表格的一些可以改进的地方（内联样式、缺少<tbody> 等），但标题标识不是其中之一。再说一次，我看不到整张桌子。但看起来插件显然不理解 colspan。尝试在标题中添加scope="col"。

对于替代插件，请尝试 WAVE 工具栏：http://wave.webaim.org/toolbar

更新：现在我通过评论中的 pastbin 链接看到了表格，我发现了一些严重的问题。首先，没有结束表格标签。你有一些比其他更宽的行。您有一个为显示目的而插入的空行。不要那样做，使用 CSS。