在行之间用多个 headers 编码 HTML table 的最佳方法是什么？

Question

在行之间用多个 header 编码 HTML table 的最佳方法是什么？我创造了一个像样的HTMLtable。但是，当我尝试将屏幕 reader 用于 508 合规性时，屏幕 reader 读取所有行 headers (Header 1, Header 2, header 3) 当我浏览每一行时。有办法避免吗？我错过了什么？

这里是 fiddle:

https://jsfiddle.net/kq739m28/

<p>Test</p>

<div style=" overflow-x: auto;">
  <table style=" width: 100%;">
    <thead>
      <tr>
        <td>&#160;</td>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
        <th>6</th>
        <th>7</th>
        <th>8</th>
        <th>9</th>
      </tr>

    </thead>
    <tbody>
      <tr>
        <th colspan="10" scope="colgroup" style=" background-color: #e0e0e0; text-align: left;">Header1</th>
      </tr>

      <tr>
        <th style=" font-weight: 400; text-align: left;">dffddf</th>
        <td>✓</td>
        <td>✓</td>
        <td>✓</td>
        <td>✓</td>
        <td>&#160;</td>
        <td>&#160;</td>
        <td>✓</td>
        <td>✓</td>
        <td>✓</td>
      </tr>

      <tr>
        <th style=" font-weight: 400; text-align: left;">fdfdfdf</th>
        <td>✓</td>
        <td>✓</td>
        <td>✓</td>
        <td>✓</td>
        <td>✓</td>
        <td>✓</td>
        <td>✓</td>
        <td>✓</td>
        <td>✓</td>
      </tr>

      <tr>
        <th style=" font-weight: 400; text-align: left;">dffddf</th>
        <td align="center" style=" text-align: center; color: black;">&#160;</td>
        <td align="center" style=" text-align: center; color: black;">&#160;</td>
        <td align="center" style=" text-align: center; color: black;">&#160;</td>
        <td align="center" style=" text-align: center; color: black;">&#160;</td>
        <td align="center" style=" text-align: center; color: black;">&#160;</td>
        <td>✓</td>
        <td align="center" style=" text-align: center; color: black;">&#160;</td>
        <td align="center" style=" text-align: center; color: black;">&#160;</td>
        <td align="center" style=" text-align: center; color: black;">&#160;</td>
      </tr>

      <tr>
        <th colspan="10" scope="colgroup" style=" background-color: #e0e0e0; text-align: left;">Header2</th>
      </tr>

      <tr>
        <th style=" font-weight: 400; text-align: left;">5455445</th>
        <td>✓</td>
        <td>✓</td>
        <td>✓</td>
        <td>✓</td>
        <td align="center" style=" text-align: center; color: black;">&#160;</td>
        <td align="center" style=" text-align: center; color: black;">&#160;</td>
        <td>✓</td>
        <td>✓</td>
        <td>✓</td>
      </tr>

      <tr>
        <th style=" font-weight: 400; text-align: left;">fdfggfgf</th>
        <td>✓</td>
        <td>✓</td>
        <td>✓</td>
        <td>✓</td>
        <td>✓</td>
        <td>✓</td>
        <td>✓</td>
        <td>✓</td>
        <td>✓</td>
      </tr>

      <tr>
        <th colspan="10" scope="colgroup" style=" background-color: #e0e0e0; text-align: left;">Header3</th>
      </tr>

      <tr>
        <th style=" font-weight: 400; text-align: left;">fgggf</th>
        <td>✓</td>
        <td>✓</td>
        <td>✓</td>
        <td>✓</td>
        <td>✓</td>
        <td>✓</td>
        <td>✓</td>
        <td>&#160;</td>
        <td>✓</td>
      </tr>

      <tr>
        <th style=" font-weight: 400; text-align: left;">fgggfgf</th>
        <td>✓</td>
        <td>✓</td>
        <td>✓</td>
        <td>✓</td>
        <td>✓</td>
        <td>&#160;</td>
        <td>&#160;</td>
        <td>✓</td>
        <td>&#160;</td>
      </tr>
  </table>
</div>

Answer 1

您可以让屏幕 reader 跳过它。

Methods to Hide from Screen Readers: To hide text from a screen reader and display it visually, use the aria-hidden attribute and set it to true. Source from Pluralsight

<p aria-hidden="true">Visible text screen readers should ignore</p>

Answer 2

您需要在单独的 <tbody> 元素上使用 ARIA role="rowgroup" 属性来指定 header 行必须应用到的行组。那么您还应该将 scope="rowgroup" 属性应用于您的个人 header 行。

例如：

<table style="width: 100%;">
    <thead>
        <tr>
            <td>&#160;</td>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
            <th>6</th>
            <th>7</th>
            <th>8</th>
            <th>9</th>
        </tr>
    </thead>
    <tbody role="rowgroup">
        <tr>
            <th colspan="10" scope="rowgroup" style="background-color: #e0e0e0; text-align: left;">Header1</th>
        </tr>
        <tr>
            <th>dffddf</th>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td>&#160;</td>
            <td>&#160;</td>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
        </tr>
        <tr>
            <th>fdfdfdf</th>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
        </tr>
        <tr>
            <th>dffddf</th>
            <td>&#160;</td>
            <td>&#160;</td>
            <td>&#160;</td>
            <td>&#160;</td>
            <td>&#160;</td>
            <td>✓</td>
            <td>&#160;</td>
            <td>&#160;</td>
            <td>&#160;</td>
        </tr>
    </tbody>
    <tbody role="rowgroup">
        <tr>
            <th colspan="10" scope="rowgroup" style=" background-color: #e0e0e0; text-align: left;">Header2</th>
        </tr>
        <tr>
            <th>5455445</th>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td>&#160;</td>
            <td>&#160;</td>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
        </tr>
        <tr>
            <th>fdfggfgf</th>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
        </tr>
    </tbody>
    <tbody role="rowgroup">
        <tr>
            <th colspan="10" scope="rowgroup" style=" background-color: #e0e0e0; text-align: left;">Header3</th>
        </tr>
        <tr>
            <th>fgggf</th>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td>&#160;</td>
            <td>✓</td>
        </tr>
        <tr>
            <th>fgggfgf</th>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td>&#160;</td>
            <td>&#160;</td>
            <td>✓</td>
            <td>&#160;</td>
        </tr>
    </tbody>
</table>

我在 Chrome 99 中使用 JAWS 2022 和 NVDA 2021 测试了这段代码，以确保每次我从列到列。

这里有一些有用的文章解释了如何实现 ARIA rowgroup 角色：

W3C Techniques for WCAG 2.1: Using the scope attribute to associate header cells and data cells in data tables

MDN Web Docs: ARIA: rowgroup role

在行之间用多个 headers 编码 HTML table 的最佳方法是什么？

What is the best way to code HTML table with multiple headers in between rows?

html

css

accessibility

screen-readers