css - 如何为屏幕阅读器标记晦涩的数据表布局？

Question

我需要标记以下设计，我不能修改其布局:

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

我选择了一张 table ，因为它感觉 95% 像 table 。但是当涉及到每个元素下数据点布局的适当语义标记时，我感到很困惑。每个点都是不同的，即这不是自由格式文本，并且每次都放置在相同的相对位置 - 但它打破了传统的数据表布局，因为没有为这些点呈现指定的标题或标签。我有兴趣标记这样的布局，以便它:

1. 语义
2. 适用于现代屏幕阅读器(我知道一些较旧的屏幕阅读器有各种错误，但就像较旧的浏览器一样，我认为限制弃用软件的更好/更新技术是不公平的) .

这几年遇到过无数次这个问题，终于破解了，求助于社区。我试过:

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

感谢任何帮助。

注意:渲染它以显示跨浏览器并不是真的那么难 - 我感兴趣的是如何使它具有语义和可访问性。

Answer 1

是的，配一张 table !我花了几次迭代才得到一个包含表格的网站 Webrichtlijnen合规，但它最终通过了所有标准。您需要注意以下几点:

• 包括 summary提供简短的属性summary of your table .您可以添加 <caption/> ，但这不是必需的，在某些情况下，表格上方的标题也可以。
• 使用 scope th 上的属性和你的第一个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 功能。