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

Question

我面临的挑战是使 HTML 表格/网格可访问，它为用户提供了选择一行并对选定行执行操作的可能性。

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

我的问题是： 如何使页面顶部的按钮（用于在行上执行操作）可访问？如何让屏幕阅读器宣布该部分，以便用户能够与之交互？

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

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

这是一个糟糕的模式，我想使用它吗？或者如何解决？

Answer 1

具有内部可选择性和外部编辑控件的大表本来就很难使用，即使没有任何残疾。

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

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

Selectability 容易让人混淆，因为您专注于一个单元格，但是当您选择它时，您可能想要选择它、它的行或它的列，因此您需要一种方法来区分这三种选择。此外，选择是自动跟随焦点还是需要单独的操作也不清楚。

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

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

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

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

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