如何使用表格外的控件访问 HTML 表格/网格

问题描述

我面临的挑战是让 HTML 表格/网格可访问,这让用户可以选择一行并对所选行执行操作。

以下链接提供了一个示例,说明所有内容的外观(无可访问性): https://alejandro.app.fi/crud-ui-demo/simple

我的问题是: 如何使页面顶部的按钮可访问,以便在行上执行操作?如何让屏幕阅读器朗读该部分,以便用户能够与其进行交互?

在我看来,让屏幕阅读器读取诸如“编辑此行标签返回 xyz 次并使用表格上方的按钮”之类的内容是个坏主意

搜索了 wai-aria 并希望找到类似“连接器”的东西,让屏幕阅读器连接到顶部的这些按钮,但找不到任何合适的东西。

这是一个不好的模式,我想使用它吗?或者怎么解决

解决方法

具有内部可选性和外部编辑控件的大型表格本质上难以使用,即使没有任何障碍。

大表很难获得直观的信息。

宽表或在窄窗口中查看的表需要水平滚动。

Selectability 往往令人困惑,因为您专注于一个单元格,但是当您选择它时,您可能想要选择它、它的行或它的列,因此您需要一种方法来区分这三种选择。此外,选择是自动跟随焦点还是需要单独的操作并不明显。

外部编辑控件与许多表格内容相距甚远,因此当您查看控件时,可能会看不到所选行,从而忘记选择了哪一行。

屏幕阅读器对表格的支持很差,并且经常提供有关单元格的错误标题信息。

如果您问用户想要什么,很可能不会告诉您他们想要查看排列在网格中的数百个字母数字事实。对于编辑数据,大多数用户可能想要 (1) 一种找到所需数据的方法和 (2) 一种编辑这些数据的方法。显示表格中的所有数据不太可能是实现 #1 或 #2 的用户友好方法。

聪明的渲染方法在常见情况下可能会失败。例如,在引用的表格上方是一个可水平滚动的表格类型顶部列表。在窄设备上,列表的右端无法滚动到视图中。

原则上,表格可以是 WCAG 可访问的。在实践中,表格,尤其是大型、复杂或可操作的表格,在可用性和可访问性方面通常不如其他解决方案。