带有网格数据的 HTML 可访问性答案

【问题标题】：HTML Accessibility with grid data带有网格数据的 HTML 可访问性
【发布时间】：2011-12-30 17:20:34
【问题描述】：

这是我的示例输出的 js fiddle：http://jsfiddle.net/Hdzv8/，下面是 html。这是一个非常简单的信息显示，但您将如何使其易于访问？我可以制作 div 而不是表格，但我无法更改整体结构。我遇到的问题是目前没有迹象表明“重量”是“16 盎司”的标题。您将如何（从可访问性的角度）将这些部分标记为标题？

<table border="5">
<tr>
    <td colspan="6">Device Information</td>
</tr>
<tr>
    <td><b>Weight</b></td><td>16oz</td>
    <td><b>Height</b></td><td>3in</td>
    <td><b>Color</b></td><td>Brown</td>
</tr>
<tr>
    <td><b>Manufacturer</b></td><td>ACME Manufacturing</td>
    <td><b>Disposal Method</b></td><td>Shoot into the sun</td>
    <td><b>Alternate Color</b></td><td>Black</td>
</tr>
<tr>
    <td><b>Installation Manual</b></td><td>ACME 45.51.2009</td>
    <td><b>CCRC Code</b></td><td>CCRC551</td>
    <td><b>USNumber</b></td><td>55un</td>
</tr>

【问题讨论】：

第一行应该是 caption element 并且应该使用 CSS 而不是边框属性和 b 元素（应该是 th 元素和 CSS font-weight: bold; - 默认情况下已经在所有已知浏览器上但你仍然可以写）

标签： html css accessibility section508

【解决方案1】：

如果您要拥有多个记录，我会将其保留为表格（它实际上是表格数据），但使用 th 作为标题。如果只是一条记录，我会选择divs 之类的；看起来更像是演示，而不仅仅是数据。 HTMLDog 有几个tutorials on tables 有很多关于使用和可访问性的建议。

编辑：再想一想，我可能只是制作一个两列九行的表，其中每一行指定一个字段（例如体重、身高），第一列使用th 指定行标题，第二列使用@987654329 @ 为实际值。有关工作示例，请参阅 this Fiddle。

编辑 2： This related SO post 让我认为如果您不想使用 table，定义或描述列表（使用 dl 标签）可能是合适的。

【讨论】：

好吧，很简单，如果我使用 div，我将如何指定一个 div 是标签（高度）而另一个是值（160z）？
现在我正在考虑它，我认为table 在这里很有意义。立即编写编辑。
嘿，太好了，谢谢！唯一的问题是我无法更改 UI，它必须通过，所以它仍然是这样的（jsfiddle.net/AtKvC/2）。你知道这样混合 td/th 是否可以接受？
语法方面，完全可以接受。不过，从scope attribute 来看，我想说W3C 只意味着每行或每列有一个th。所以如果你真的很担心语义，也许就坚持td。

【解决方案2】：

我不知道您的真实数据是否可行（因为我并没有在您的示例中看到明确的列关系），但您也可以考虑将整个标记转换为一个（或多个）描述列表，例如

<tr>
   <td><b>Weight</b></td><td>16oz</td>
   ...
</tr>

可能变成

<dl>
    <dt>Weight</dt><dd>16oz</dd>
    ...
</dl>

否则你仍然可以像这样使用带有headers 属性的表格

<tr>
   <td id="header1"><b>Weight</b></td><td headers="header1">16oz</td>
   ...
</tr>

来源：http://www.w3.org/TR/WCAG20-TECHS/H43

【讨论】：

在第二个示例中，您将数据单元格与另一个数据单元格相关联。我认为这是禁止的：技术 H43 旨在将数据单元格与 标题单元格 相关联（以及“子”标题单元格与其他标题单元格）。数据单元格=td和标题单元格=th，应该是<th id="header1">blah</th><td headers="header1">blah2</td>
看着jimthatcher.com/webcourse9.htm#wc9.3 似乎任何单元格都可以用作标题属性的目标（不仅是元素）：>“您将 id 属性附加到您想成为标题的任何单元格单元格。然后，将每个标题单元格的 id 添加到数据单元格的 headers 属性中。"

【解决方案3】：

如果您必须保持这种格式，则不需要表格。表应该只用于呈现自然属于网格的数据。如果您必须保持这种格式，最好使用描述列表并使用 CSS 将其设置为带边框的样式表。

如果您确实使用表格，那么这是正确的方法。使用 css 而不是 html 属性进行样式设置使用“强”代替“b” 使用表表格必须使用正确的 html 格式

<table class="myborderclass">
<caption>
Device Information
</caption>
<thead>
 <tr>
   <th scope="col">Weight</th>
   <th scope="col">Height</b></th>
   <td scope="col">Color</b></th>
   <th scope="col">Manufacturer</b></th>
   <th scope="col">Disposal Method</b></th>
   <th scope="col">Alternate Color</b></th>
   <th scope="col">Installation Manual</b></th>
   <th scope="col">CCRC Code</b></th>
   <th scope="col">USNumber</b></th>
 </tr>
</thead>
<tbody>
<tr>
   <td>16oz</td>
   <td>3 inches</td>
   <td>Brown</td>
   <td>ACME</td>
   <td>Shoot into the sun</td>
   <td>Black</td>
   <td>ACME 45.51.2009</td>
   <td>CCRC551</td>
   <td>55un</td>
  </tr>
 </tbody>
</table>

【讨论】：