在显示多个项目的滑块中保持 tabindex 顺序逻辑

Question

我的网站有带有选项卡式导航的轮播/滑块面板。每个面板都显示了一条书籍封面的“河流”。一次显示 5 个封面，单击下一张/上一张幻灯片会弹出 3 本书，进入 3 本书。 DOM 中书籍的顺序不会改变，只是它们的左侧位置和可见性发生变化。

<div class="books">
<a class="book"><img>#1</a>
<a class="book"><img>#2</a>
<a class="book"><img>#3</a>
<a class="book"><img>#4</a>
...
<a class="book"><img>#25</a>
</div>

为了可访问性，即使单击上一页/下一页，我也需要将键盘导航的 Tab 键顺序保留为 [上一页按钮][第 1 册][第 2 册][第 3 册][第 4 册][第 5 册][下一个按钮] .

该图显示了我的问题：如果单击 prev，则会滑入三本书，但在 DOM 中它们是书 #23、#24 和 #25。当按下选项卡时，焦点跳转到 DOM 中的#1 本书，现在位于左起第四本书。

这只是第一次单击 prev 时出现的问题，但它仍然被标记为可访问性问题。 （我知道这些类型的滑块对于可访问性来说是一个挑战）

我尝试在单击上一个和下一个时动态设置 Flexbox 顺序，但发现 Tab 键顺序不受 CSS 属性的影响。将 tabindex 设置为 1, 2, 3, 4, 5 会使书的封面位于页面的中间，当然成为第一个可聚焦的项目 - 这是不可取的！

我是否缺少动态设置 tabindex 的功能，因此它以某种方式限制在其容器中？我最初的滑块设计是通过实际移动 DOM 中的项目来实现的，这也带来了自己的问题。当书籍的可见性设置发生变化时，有什么方法可以保持焦点顺序逻辑，而不改变 DOM 顺序？我是否缺少 ARIA 功能？

Answer 1

所以基本上，为了与轮播中显示的内容保持一致的 Tab 键顺序，您可以选择在 DOM 中移动元素，或使用 tabindex>0。

如果您开始在单个位置使用 tabindex>0，则必须为整个页面中的每个可聚焦项目添加正的 tabindex 值，以便在各处保持一致的 Tab 键顺序（是的，包括在唯一的轮播组件之外）。 与在 DOM 中移动元素相比，这无疑更具挑战性、更脆弱、更难维护。

最简单的解决方案是在幻灯片 1 时禁用上一张按钮，在幻灯片最后时禁用下一张按钮。或者换句话说，不要使轮播为圆形、无限滚动或环绕边缘。 这样做，您就可以避免所有问题！这可能不是您期望的答案...