javascript - 如何确保通过 ajax 加载的表上的逻辑选项卡顺序

Question

所以我遇到了可访问性问题，我们需要表格的数据按行聚焦。为此，我们的第一直觉是在 <tr> 上设置一个 tabindex。 .起初，这似乎工作得很好。不幸的是，数据是通过 ajax 加载到表中的，这会导致问题，因为数据不知道页面上已经设置的 tabindexes。例如，假设页面索引如下所示:

1 2 3 [ ???实时数据？？？ ] 4 5 6

加载表的数据后，索引最终看起来像这样:

1 2 3 [ 1 2 3 4 ] 4 5 6

所以现在，当用户尝试切换时，第一个索引在页面顶部，第二个索引在事件区域​​内，然后第三个在页面顶部，第四个在内部现场区域等。本质上，它按顺序索引所有 1，然后是 2，等等。

如何确保表格数据在加载后可以按正确的顺序切换？

到目前为止，我的第一个想法是编写一个脚本，基本上使用 tabindex 获取所有内容，然后重置顺序以包含新的索引元素。这种方法可行，但前提是选项卡索引与 DOM 顺序(默认/自然)对齐。

对此有什么想法/解决方案吗？

更新:我只是尝试将所有行索引设置为 0，希望它只会使其可聚焦并将其插入到 tabindexes 的“自然流”中。不过这感觉有点奇怪。是正确的做法吗？

Answer 1

作为最佳实践，依赖自然的 Tab 键顺序并且不要以这种方式使用 tabindex。尝试手动设置和管理 Tab 键顺序将是一场噩梦 - 绝对是一种反模式。

屏幕阅读器已经提供了表格导航工具，允许用户按行和按单元格导航，因此没有必要以这种方式使 TR 可聚焦。

表格导航命令:

• 英伟达:http://community.nvda-project.org/documentation/userGuide.html#SystemCaret
• 大白鲨:http://www.freedomscientific.com/Training/Surfs-up/Table_Reading_Commands.htm
• 旁白:https://www.apple.com/voiceover/info/guide/_1133.html#mchlp2723