2

我提供了一个大致如下所示的数据表：

|                   |  2009  |  2010  |  2011  |
| location 1        |  pass  |  pass  |  fail  |
| location 2        |  fail  |  pass  |  pass  |

对于视力正常的读者来说，第一列的含义 - 位置名称 - 很清楚，并且不使用列标题在视觉上看起来更好。但是，这对使用屏幕阅读器的人没有帮助，而且不出所料，WAI 验证失败。

我的标记看起来像：

<table>
 <thead>
   <tr>
     <th>&nbsp;</th> <!-- question here -->
     <th>2009</th>
     <th>2010</th>
     <th>2011</th>
   </tr>
 </thead>
 ...

所以我的问题是：我应该在指示中添加什么，th以便它为需要它的人提供支持和上下文，但不会为不需要它的人增加视觉混乱？

我想到的一种选择是将列标题添加到标记中，然后使用 CSS 使其不可见，以供有视力的读者使用。但是，我想知道使用 ARIA 元数据或类似的东西是否有更好（更语义）的方式？

4

3 回答 3

1

TL;DR：第 1 列，第 1 单元格应为：<td>&nbsp;</td>

请注意，这不是每个人的答案，我需要更多的格式化空间

伊恩留下以下评论：

但这正是重点。我想用一些有助于用户依赖屏幕阅读器的内容来注释列，同时不会分散其他用户的注意力

...但为什么？我见过的 99% 的表格，将这个单元格留空，这样你就不会把扳手扔进袋子里。

使用 CSS 隐藏文本以添加“此单元格故意留空”几乎没有添加任何值。它增加了人们必须听的无用的玩笑。此外，每天使用屏幕阅读器的人通常不会逐个单元格地阅读。当他们遇到表格时，辅助技术会宣布列数和行数，然后是摘要（见下文），然后是<caption>.

如果要在此单元格中描述表格；例如：（表中包含从 - 到日期的 xxx 的数据。等等等等），不要。旧方法是使用summary属性 ( <table summary='...'>)。W3c 验证器现在说

“摘要属性已过时。考虑在标题元素或包含表格的图形元素中描述表格的结构；或者，简化表格的结构，以便不需要描述。”

当您使用 HTML5 时。

通过一些快速研究 [ 1 ]、[ 2 ]、[ 3 ]，看起来上面的验证器错误是从 2011 年 4 月的工作组决定中得到的。我的直觉<caption>是他们建议使用标签，以便更多人可以访问它，ala 更加通用设计。我没有看到任何支持或反对说你不能使用的东西aria-describedby="{ID}"，并将那段推到屏幕外。

于 2013-06-13T19:54:19.180 回答
1

只是出于好奇，您在哪里检查 WAI 验证？我之所以这么问，是因为将您的代码放入此 Web 可访问性检查器不会产生任何错误。所以看起来你所拥有的可能是可行的。

无论如何，看起来 WebAIM 的人在他们的表格中（靠近底部）有一个类似的例子，他们只是使用<td>&nbsp;</td>而不是th.

更重要的方面是使用scope每个属性th来确保它指向与其对应的列或行。例如：

<th scope="col">2009</th>

和

<th scope="row">location 1</th>

更多信息可以在他们的文章中找到。

于 2013-06-11T16:04:46.830 回答
0

我目前解决这个问题的方法是：

<table>
  <tr>
    <th scope='col'><span class='nodisplay'>Location</span></th>
    <th scope='col'>2009</th>
    <th scope='col'>2010</th>
    <th scope='col'>2011</th>
  </tr>
  ...
</table>

接着：

.nodisplay {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

所以我向有视力的读者隐藏内容，而不是为通过屏幕阅读器访问内容的用户添加内容。但我不确定这是否是最好的方法。

于 2013-06-14T09:41:43.823 回答