如何为屏幕阅读器标记一个模糊的数据表布局？

Question

我有以下设计我需要标记，我不能修改的布局：

请忽略填充文字，我知道它没有多大意义。

我选择了一张桌子，因为它感觉像桌子一样95％。但是，当涉及到每个项目下面的数据点布局的适当语义标记时，我感到困惑。每个点都是不同的，即这不是自由形式的文本，并且每次都放在相同的相对位置 - 但它打破了传统的数据表布局，因为没有为这些点渲染的已分配标题或标签。我有兴趣标记这样的布局，以便它们都是：

1. 的语义
2. 适用于现代屏幕阅读器（我知道一些较旧的屏幕阅读器存在各种错误，但与旧浏览器非常相似，我认为限制使用已弃用软件的更好/更新技术是不公平的）

过去几年我曾多次遇到过这个问题，最后破解并向社会寻求建议。我试过了：

1. 为每个项目使用单独的tbody s，并在第二行使用额外的数据点，但在我无法弄清楚如何将“subrow”与项目相关联时放弃了。 / LI>
2. 水平放置包含所有各种数据点和标题的表格，然后使用CSS定位事物。不幸的是，与我之前关于弃用软件的声明相反，我需要支持IE 7，这种技术失败了。
3. 我考虑使用隐藏行 - th和rowspans来创建更复杂的表格布局并尝试使用ARIA来获得所需的屏幕阅读结果，但都无济于事
4. 我也考虑使用嵌套表，但这感觉非常非常错误。

任何帮助表示感谢。

注意：渲染它以显示跨浏览器并不是那么难 - 我对如何使这种语义和可访问感兴趣。

Answer 1

是的，请带一张桌子！我花了几次迭代来获得一个包含表Webrichtlijnen的网站，但它最终通过了所有标准。您需要注意以下几点：

• 添加summary属性以提供简短的summary of your table。您可以添加<caption/>，但这不是必需的，在某些情况下，表格上方的标题也可以。
• 在您的th 和上使用scope属性作为您的第一个td（在大多数情况下，其他列将与第一个表格单元格的标签相关联一排）。
• 以删除按钮的文本版本开头。
• 我会使用删除按钮的描述性标题。
• 请确保在缩写的月份中使用<abbr/>标记。

该表的一个例子可能是：

<table summary="summary">
  <thead>
    <tr>
      <th scope="col">Course</th>
      <th scope="col">Column 2</th>
      <th scope="col">Column 3</th>
      <th scope="col">Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td scope="row">
        <div class="title">Title</div>
        <div class="sub-title">Subtitle</div>
        <div class="period">Period</div>
      </td>
      <td class="number">1.45</td>
      <td class="number">$1,047</td>
      <td><a href="">Delete</a></td>
    </tr>
  <tbody>
</table>

如果您选择在删除链接上使用Ajax，首先在没有任何Javascript的情况下实现它（只需指向删除相应项的URL），然后向其添加Ajax功能。

Answer 2

一般来说，我有一个包含1个标题行和6个数据行的表，其中奇数数据行有3个单元格，偶数数据行有一个单元格跨越三列。

在偶数行的单元格中，我有一个{lorem 102“行的<h?>元素和一个详细点列表。在偶数行的单元格的<td>元素上，我有headers属性指向上面行的第一个单元格，以提供从子行到项目的关联。

我可能会在<caption>元素上添加summary元素或<table>属性来描述结构。

更新：看过Jasper de Vries的回答，我意识到我省略了删除列。请遵循他的建议。