带网格数据的HTML辅助功能

Question

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

<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>

Answer 1

如果你将有一个以上的记录，我会把它作为一个表（它实际上是表格数据），但使用th作为标题。 如果它只是一个记录，我会选择div等; 看起来更像是演示而不仅仅是数据。 HTMLDog有一些关于表的教程，其中包含大量有关使用和可访问性的建议。

编辑 ：第二个想法，我可能只是制作一个两列九行表，其中每行指定一个字段（例如重量，高度），第一列使用th指定行标题，第二列使用td表示实际价值。 有关工作示例，请参见此提琴 。

编辑2 ： 这个相关的SO帖子让我觉得如果你不想使用table定义或描述列表（使用dl标签）可能是合适的。

Answer 2

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

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

可能成为

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

否则你仍然可以使用table with headers属性

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

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

Answer 3

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

如果您使用表格，这是正确的方法。 使用css而不是html属性进行样式使用'strong'代替'b'使用tabl表必须使用正确的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>