键盘可访问性：跳过交互式表格中的内容

Question

我目前正在开发一个包含交互式 mat-table 的 Angular Web 项目。我们正在努力使其完全可用于键盘导航。

我显示的数据是搜索的匹配项，表格包含行，每个行都有一个复选框来选择它和一个包含分页的页脚（每页的条目范围从 25 到 1000，标准为 100）和一个“继续”按钮，用于保存选择并导航到下一页。 表格内的导航工作得很好，但要仅使用键盘进入分页或继续按钮，必须在表格中的所有条目之间切换。我们正在寻找使之成为可能的方法。

我很高兴听到您过去是如何解决此类问题的，或者显然您是仅使用键盘导航的人。是否有我不知道的导航工具或快捷方式？

我不是在寻找代码示例，而是在寻找如何去做的想法。到目前为止，这是我所考虑的：

1. 一个。创建一个自定义快捷方式来聚焦按钮
   缺点：恐怕 键盘快捷键会干扰辅助设备 用户或他们可能同时使用的其他软件。

2. 添加一个“跳到页脚”按钮
   缺点：表格的标题是 已经挤满了表格的标题，并且取决于如何 到目前为止，用户正在查看可能与 现在按钮很麻烦

3. 添加某种可访问性菜单，将页面长度设置为 10 或其他东西并保存他们的首选选项
   缺点：我们目前 不为用户保存任何设置，所以我们必须实施一个全新的 事情，我们正在努力赶上最后期限

4. 什么都不做，只希望键盘用户按自己的方式使用 Tab 通过整个表格或信任他们做出他们的搜索参数 具体到只得到很少的结果（我正在使用的数据 基本上允许 90% 的搜索只获得一次点击）

Answer 1

5. 实施accessKey

您需要在页面或帮助部分的某处添加注释，以便用户知道密钥可用。

屏幕阅读器用户不需要该键，因为他们可以使用屏幕阅读器的其他内置快捷键轻松导航到其他元素。如果您的分页包含在 <nav> 中，那么这就是导航 landmark，并且地标很容易导航到。

Answer 2

创建自定义快捷方式来聚焦按钮

是的，您是对的，如果无法关闭访问密钥，它们可能是一场真正的噩梦。

如果您决定实现这一点，您确实还需要实现一个设置屏幕，您可以在其中更改访问密钥。

正如你所说，时间对你不利，所以这可能不是一个选择。

不要实现访问键，除非您有办法更改它们，因为即使是“安全”键也可能被人们使用（例如，如果他们更改了屏幕阅读器上的快捷方式）。

添加“跳到页脚”按钮

您可以将其设为浮动按钮或锚点。类似于首次进入页面时“跳转到内容”链接的工作方式。

跳转链接只有在您使用 Tab 键时才可见，因此可以放置在不会干扰您当前的表格标题等的位置。

作为快速修复，这是您的最佳选择

添加某种可访问性菜单，将页面长度设置为 10 或其他内容并保存他们的首选选项

能够设置分页长度不仅对键盘用户有用，对每个人也有用。

我会说这与上面的跳过链接选项相结合将成为最佳的整体解决方案。

显然是时候立即发布了，您可以将其作为高优先级功能添加到路线图中。

什么都不做

只有您可以回答这是否适用于现实世界，我想大多数用户会更喜欢更少的搜索参数，而只是查看结果列表。

我想什么都不做并不理想，尤其是每页 1000 个条目的选项！

我将如何处理它？

我之前避开了它，但一个不可见的“跳到页脚”链接仅在聚焦时出现，结合页脚中的“分页长度”设置（每页结果）将是时间、可用性和整体性之间的最佳平衡用户体验改进。

最终，为键盘用户实施访问键会很棒，因为他们一旦学会就会大大提高工作效率。

但您可能希望在整个系统范围内执行此操作，并拥有我之前提到的设置屏幕，以便可以修复碰撞（或者对于已经使用内置快捷方式的辅助技术的人，可以完全关闭快捷键）。

但是，如果您还没有实现它，那么这会很耗时，因此它可能不可行，即使它会是一个很棒的功能！