在行之间使用多个标头编码HTML表的最佳方法是什么？

发布于 2025-01-21 07:54:57 字数 4882 浏览 6 评论 0原文

在行之间使用多个标头编码HTML表的最佳方法是什么？我创建了一个不错的HTML表。但是，当我尝试将屏幕读取器用于508合规性时，屏幕读取器读取所有行标题（标题1，标头2，标头3）时，当我浏览每行时。有没有办法避免它？我想念什么？

这是小提琴：

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

原文

What is the best way to code HTML table with multiple headers in between rows? I have created a decent HTML table. However, when I try to use the screen reader for 508 compliance, the screen reader reads all row headers (Header 1, Header 2, header 3) when I navigate through each row. Is there a way to avoid it? What am I missing?

Here is the fiddle:

https://jsfiddle.net/kq739m28/

<p>Test</p>

<div style=" overflow-x: auto;">
  <table style=" width: 100%;">
    <thead>
      <tr>
        <td> </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> </td>
        <td> </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;"> </td>
        <td align="center" style=" text-align: center; color: black;"> </td>
        <td align="center" style=" text-align: center; color: black;"> </td>
        <td align="center" style=" text-align: center; color: black;"> </td>
        <td align="center" style=" text-align: center; color: black;"> </td>
        <td>✓</td>
        <td align="center" style=" text-align: center; color: black;"> </td>
        <td align="center" style=" text-align: center; color: black;"> </td>
        <td align="center" style=" text-align: center; color: black;"> </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;"> </td>
        <td align="center" style=" text-align: center; color: black;"> </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> </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> </td>
        <td> </td>
        <td>✓</td>
        <td> </td>
      </tr>
  </table>
</div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

风筝在阴天搁浅。 2025-01-28 07:54:57

您需要使用ARIA roun =“ RowGroup”属性属性＆lt; tbody＆gt; 元素来指定标头行必须应用的行。然后，您还应将scope =“ RowGroup”应用于您的单个标头行。

例如：

<table style="width: 100%;">
    <thead>
        <tr>
            <td> </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> </td>
            <td> </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> </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;">Header2</th>
        </tr>
        <tr>
            <th>5455445</th>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td> </td>
            <td> </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> </td>
            <td>✓</td>
        </tr>
        <tr>
            <th>fgggfgf</th>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td> </td>
            <td> </td>
            <td>✓</td>
            <td> </td>
        </tr>
    </tbody>
</table>

我用JAWS 2022和NVDA 2021在Chrome 99中测试了此代码，以确保每次我从列到列移动时都不会宣布所有行标头。

这是一些有用的文章，解释了如何实现ARIA rowGroup角色：

W3C技术：使用范围属性将数据表中的标头单元和数据单元关联

mdn web文档：aria：rowgroup crom

You'll need to use the ARIA role="rowgroup" attribute on separate <tbody> elements to specify the group of rows to which the header row must apply. Then you should also apply the scope="rowgroup" attribute to your individual header rows.

For example:

<table style="width: 100%;">
    <thead>
        <tr>
            <td> </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> </td>
            <td> </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> </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;">Header2</th>
        </tr>
        <tr>
            <th>5455445</th>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td> </td>
            <td> </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> </td>
            <td>✓</td>
        </tr>
        <tr>
            <th>fgggfgf</th>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td>✓</td>
            <td> </td>
            <td> </td>
            <td>✓</td>
            <td> </td>
        </tr>
    </tbody>
</table>

I tested this code in Chrome 99 with JAWS 2022 and NVDA 2021 to make sure that the screen reader wasn't announcing all row headers each time I moved from column to column.

Here are some useful articles explaining how to implement the ARIA rowgroup role:

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

回复收藏 0 原文

救赎№ 2025-01-28 07:54:57

您可以使屏幕阅读器跳过它。

隐藏屏幕读取器的方法：
要从屏幕读取器中隐藏文本并以视觉显示，请使用aria隐藏属性并将其设置为true。 source from PluralSight

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

You can make the screen reader skip it.

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>

回复收藏 0 原文

~没有更多了~

关于作者

夏尔

暂无简介

文章

26 人气

关注发私信

友情链接

文江博客

在行之间使用多个标头编码HTML表的最佳方法是什么？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

櫻之舞

弥枳

m2429

寻找一个思念的角度

野却迷人

我怀念的。

友情链接

在行之间使用多个标头编码HTML表的最佳方法是什么？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

櫻之舞

弥枳

m2429

寻找一个思念的角度

野却迷人

我怀念的。

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。