5

假设您有一个 HTML 表格，其中一个<th>单元格跨越多列，例如

<table>
    <tr>
        <th colspan="3" scope="?">Scores</th>
        <!-- ...more headings here... -->
    </tr>
    <tr>
        <th scope="col">English</th>
        <th scope="col">Maths</th>
        <th scope="col">Science</th>
        <!-- ...more sub-headings here... -->
    </tr>
    <tr>
        <td>12</td>
        <td>16</td>
        <td>20</td>
        <!-- ...more cells here... -->
    </tr>
</table>

跨越标题单元格的范围属性的正确值是多少？col似乎不正确，因为它的标题有几列，但colgroup如果我实际上没有任何colgroup标签，它似乎不正确。

4

3 回答 3

7

WebAIM（Web Accessibility in Mind）组有一篇关于创建可访问数据表的精彩文章。总体而言，他们建议避免跨行或跨列，因为屏幕阅读器无法可靠地解释标记。

没有完全避免跨栏，我非常幸运地将 id/headers 属性与 scope 属性结合使用。尽管标记更加冗长，但这似乎简化了 JAWS 的工作，因此它在解释数据时遇到的麻烦更少。

这是您的示例使用 id/headers 的样子：

<table>
    <tr>
        <th id="scores" colspan="3">Scores</th>
    </tr>
    <tr>
        <th id="english" scope="col">English</th>
        <th id="maths" scope="col">Maths</th>
        <th id="science" scope="col">Science</th>
    </tr>
    <tr>
        <td headers="scores english">12</td>
        <td headers="scores maths">16</td>
        <td headers="scores science">20</td>
    </tr>
</table>
于 2009-06-09T21:35:00.180 回答
3

根据 HTML 规范中的第二个示例表，它是colgroup，尽管缺少colgroup标签。

http://www.w3.org/TR/html4/struct/tables.html#h-11.4.1

于 2009-06-07T19:38:03.157 回答
1

也许字幕功能可能更适合您...

<table>
  <caption>Scores</caption>
  <thead>
    <tr>
      <th scope="col">English</th>
      <th scope="col">Maths</th>
      <th scope="col">Science</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>12</td>
      <td>16</td>
      <td>20</td>
    </tr>
  </tbody>
</table>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption

于 2013-12-08T21:38:32.710 回答