我应该如何使自定义 table 行为更易于访问？
How should I make custom table behavior more accessible?
我和我的团队正在为请求与 data-tables 相关的自定义功能的客户构建 web-app：单击给定 table 列的 header ，然后 table 将根据该列进行排序。此功能已实现。
但是，合同的一个重要规定是符合 WCAG 2.1 无障碍标准。除了在 table 秒内，我们在所有正确的地方都有 aria 标签，但不清楚我们应该如何使这种自定义 table 行为更易于访问——特别是对于 screen-reading 技术。截至目前，table header 单元格本身具有 event-handlers 用于点击以触发功能，但在此过程中不涉及任何语义 <button>s，这是事情开始的地方让我觉得有点不对劲。
table header 单元格也是可聚焦的，因此用户可以使用 Enter 或 Spacebar 以这种方式切换功能。我们应该如何处理将此行为传达给用户，尤其是那些使用 screen-readers 的用户？由于此功能不是典型的标准 table，WCAG 和其他来源的指南和要求是 unclear.
抱歉，由于内容的敏感和专有性质，我无法提供屏幕截图或代码片段。
对于任何只读的 table 也意味着不被排序等。应该使用标准 HTML tables。
在您的情况下，请使用 ARIA 1.1 指南中的设计模式网格（link https://www.w3.org/TR/wai-aria-practices/#grid 下的第 3.12 章）
您的客户应该熟悉 ARIA 为网格声明的键盘命令。操纵这些键对您来说意味着很多工作，并且会刺激屏幕 reader 用户并伤害 WCAG。
这里有两个不错的可访问排序的例子table tables:
- https://assets.cms.gov/resources/framework/2.0/Pages/datatables.html
- https://adrianroselli.com/2021/04/sortable-table-columns.html
第一个有点过于冗长，因为它是向屏幕阅读器宣布的，可以缩短以获得更好的用户体验，第二个有点过于简洁，只说“标题按钮”。我们需要一个介于两者之间的 Goldilocks 示例，但这两个示例都显示了如何在 table header 中使用 <button> 以及如何使用 aria-sort.
我在您的 OP 中没有听到任何表明应该使用 grid 的内容。请注意，网格定义中的第一句话说网格是 " 包含一个或多个行的 collection 的复合小部件，其中有一个或多个单元格，其中网格中的某些或所有单元格是可聚焦的通过使用 two-dimensional 导航方法，例如方向箭头键。" 换句话说，如果用户能够使用 up/down/left/right 箭头键导航 table （就像您正在浏览电子表格一样），那么网格是合适的。但是如果你有一个“正常”table not 允许逐个单元格导航，那么可以使用标准 <table>。只需在您的列标题 (<th>) 中添加按钮，即可对 table 进行排序。
我和我的团队正在为请求与 data-tables 相关的自定义功能的客户构建 web-app：单击给定 table 列的 header ，然后 table 将根据该列进行排序。此功能已实现。
但是，合同的一个重要规定是符合 WCAG 2.1 无障碍标准。除了在 table 秒内，我们在所有正确的地方都有 aria 标签，但不清楚我们应该如何使这种自定义 table 行为更易于访问——特别是对于 screen-reading 技术。截至目前，table header 单元格本身具有 event-handlers 用于点击以触发功能，但在此过程中不涉及任何语义 <button>s，这是事情开始的地方让我觉得有点不对劲。
table header 单元格也是可聚焦的，因此用户可以使用 Enter 或 Spacebar 以这种方式切换功能。我们应该如何处理将此行为传达给用户，尤其是那些使用 screen-readers 的用户？由于此功能不是典型的标准 table，WCAG 和其他来源的指南和要求是 unclear.
抱歉，由于内容的敏感和专有性质，我无法提供屏幕截图或代码片段。
对于任何只读的 table 也意味着不被排序等。应该使用标准 HTML tables。 在您的情况下，请使用 ARIA 1.1 指南中的设计模式网格（link https://www.w3.org/TR/wai-aria-practices/#grid 下的第 3.12 章） 您的客户应该熟悉 ARIA 为网格声明的键盘命令。操纵这些键对您来说意味着很多工作，并且会刺激屏幕 reader 用户并伤害 WCAG。
这里有两个不错的可访问排序的例子table tables:
- https://assets.cms.gov/resources/framework/2.0/Pages/datatables.html
- https://adrianroselli.com/2021/04/sortable-table-columns.html
第一个有点过于冗长，因为它是向屏幕阅读器宣布的，可以缩短以获得更好的用户体验，第二个有点过于简洁，只说“标题按钮”。我们需要一个介于两者之间的 Goldilocks 示例，但这两个示例都显示了如何在 table header 中使用 <button> 以及如何使用 aria-sort.
我在您的 OP 中没有听到任何表明应该使用 grid 的内容。请注意，网格定义中的第一句话说网格是 " 包含一个或多个行的 collection 的复合小部件，其中有一个或多个单元格，其中网格中的某些或所有单元格是可聚焦的通过使用 two-dimensional 导航方法，例如方向箭头键。" 换句话说，如果用户能够使用 up/down/left/right 箭头键导航 table （就像您正在浏览电子表格一样），那么网格是合适的。但是如果你有一个“正常”table not 允许逐个单元格导航，那么可以使用标准 <table>。只需在您的列标题 (<th>) 中添加按钮，即可对 table 进行排序。