Fire Fox 不会在 NVDA 屏幕阅读器中计算表格行数,但在 Chrome 中会计算表格行数
我正在尝试制作一个可访问的可扩展表格(以此为灵感: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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
表格元素的 CSS
display
属性不应从更改默认值。有
display:table
有
display:table-row
display:table-cell
如果更改默认值,屏幕阅读器将不再知道该元素是表格的一部分。你很幸运,这可以在 Chrome 上运行。
您发布的示例中甚至有关于此的注释。第一个要点说:
但是,该示例似乎通过专门指定表、行和单元格的
role
属性来解决这个问题。我确实在 Firefox 中听到了 rows/cols,但它说的是 2 行和 1 列,而 Chrome(正确)说的是 4 行和 5 列。 (有一个隐藏的第五列,您看不到,但屏幕阅读器“看到”它。)
在 Firefox 的代码检查器中,如果我禁用
display
和flex* 表格元素的相关 CSS 项,则表格可以正确读取。
The CSS
display
property for table elements should never be changed from the default.<table>
hasdisplay:table
<tr>
hasdisplay:table-row
<td>
hasdisplay: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:
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
andflex*
related CSS items for the table elements, then the table reads correctly.