Fire Fox 不会在 NVDA 屏幕阅读器中计算表格行数,但在 Chrome 中会计算表格行数

发布于 2025-01-14 15:13:27 字数 443 浏览 3 评论 0原文

我正在尝试制作一个可访问的可扩展表格(以此为灵感:https://fuschia-stretch.glitch。 me/ ,查看“查看源”),但 NVDA 屏幕阅读器不会读取 Fire Fox 中的列数,而是在 Chrome 中读取。以下是一些示例:

// It seems like it is this block that is causing it to not count in Fire Fox, but it counts in Chrome, what can the reason be? Or how to solve this?
tr {
  display: flex;
  flex-flow: row wrap;
}

感谢您的帮助

I am trying to make an accessible expandable table (taking this as inspiration: https://fuschia-stretch.glitch.me/ , check out "View souce"), but the NVDA screen reader do not read the number of columns in Fire Fox, but reads them in Chrome. Here are some examples:

// It seems like it is this block that is causing it to not count in Fire Fox, but it counts in Chrome, what can the reason be? Or how to solve this?
tr {
  display: flex;
  flex-flow: row wrap;
}

Thank you for all help

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

讽刺将军 2025-01-21 15:13:27

表格元素的 CSS display 属性不应更改默认值。

  • display:table

  • A display:table-row
  • A < code> 有 display:table-cell

如果更改默认值,屏幕阅读器将不再知道该元素是表格的一部分。你很幸运,这可以在 Chrome 上运行。

您发布的示例中甚至有关于此的注释。第一个要点说:

  • ARIA 表角色附加到所有本机元素。如果没有这个,一些屏幕阅读器 (VO) 将无法正确读取表格,由于使用了 display: flex

但是,该示例似乎通过专门指定表、行和单元格的 role 属性来解决这个问题。

确实在 Firefox 中听到了 rows/cols,但它说的是 2 行和 1 列,而 Chrome(正确)说的是 4 行和 5 列。 (有一个隐藏的第五列,您看不到,但屏幕阅读器“看到”它。)

在 Firefox 的代码检查器中,如果我禁用 displayflex* 表格元素的相关 CSS 项,则表格可以正确读取。

The CSS display property for table elements should never be changed from the default.

  • A <table> has display:table
  • A <tr> has display:table-row
  • A <td> has display:table-cell

If you change the default, a screen reader doesn't know the element is part of a table anymore. You're getting lucky this is working on Chrome.

There's even a note about this in the example you posted. The first bullet point says:

  • ARIA table roles are attached to all native elements. Without this, some screen readers (VO) would not read the table correctly, due to display: flex being used.

However, the example seems to work around that by specifically specifying the role attribute for the table, rows, and cells.

I do hear rows/cols in Firefox but it says 2 rows and 1 column whereas Chrome (correctly) says 4 rows and 5 columns. (There's a hidden 5th column that you can't visibly see but the screen reader "sees" it.)

In the code inspector for Firefox, if I disable the display and flex* related CSS items for the table elements, then the table reads correctly.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文