多元素轮播滑块中保持tabindex逻辑顺序的无障碍实现

问题说明 #

我开发了一个带标签导航的书籍轮播面板，核心逻辑：

• 一次展示5本书籍封面，点击「上一页/下一页」时滑出3本旧书、滑入3本新书
• DOM中书籍顺序固定，仅通过修改元素left位置和可见性实现滑动效果
• 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>#25</a>
</div>

无障碍需求 #

键盘Tab导航顺序必须固定为：[上一页按钮] → [当前显示的第1本] → [第2本] → [第3本] → [第4本] → [第5本] → [下一页按钮]，但当前存在问题：首次点击「上一页」后，视觉上显示#23、#24、#25等书籍，Tab键却会跳转到DOM中的#1号书籍（此时它在视觉左侧第4位），已被标记为无障碍缺陷。

已尝试无效方案 #

• 动态设置flexbox的order属性：Tab顺序不受CSS属性影响
• 给可见书籍设tabindex=1~5：会让书籍成为全局最高优先级焦点元素，不符合页面整体导航逻辑

可行解决方案 #

1. 动态控制tabindex（推荐） #

无需设置tabindex≥1的数值，仅对非可见的书籍设置tabindex="-1"，可见书籍保持默认的tabindex=0（<a>标签默认可聚焦，无需手动设置）。

• 原理：tabindex="-1"的元素不会被Tab键聚焦，但仍可通过脚本调用focus()聚焦；默认tabindex=0的元素会按照DOM顺序被Tab键访问
• 适配循环轮播场景：当轮播切换到包含末尾+开头书籍的分组（如#23、#24、#25、#1、#2）时，这些元素在DOM中的顺序与视觉顺序一致，Tab导航会自然遵循视觉上的从左到右顺序，完全符合需求

2. 结合ARIA属性增强无障碍体验 #

• 给轮播容器添加role="region"和aria-label="书籍轮播"，让屏幕阅读器识别这是一个独立交互区域
• 给上下页按钮添加明确的aria-label，例如：

  <button aria-label="切换到上一页书籍">上一页</button>
  <button aria-label="切换到下一页书籍">下一页</button>
  

• 添加aria-live="polite"的隐藏区域，在轮播切换后更新内容，通知屏幕阅读器当前显示的书籍范围，例如：

  <div aria-live="polite" class="sr-only">当前显示第23至25号及1、2号书籍</div>
  

  （.sr-only为屏幕阅读器可见、视觉隐藏的样式类）

3. 脚本辅助焦点定位 #

在「上一页/下一页」按钮点击完成、轮播动画结束后，自动将焦点设置到当前视觉上的第一本可见书籍：

// 示例代码：切换完成后找到第一本可见书籍并聚焦
function focusFirstVisibleBook() {
  const firstVisibleBook = document.querySelector('.book:not([tabindex="-1"])');
  if (firstVisibleBook) {
    firstVisibleBook.focus();
  }
}

该方法可确保用户按Tab键时直接从当前轮播的第一本书开始导航，进一步强化逻辑一致性

关键注意事项 #

• 禁止使用tabindex≥1的数值，这会彻底打乱页面全局Tab导航顺序
• 确保轮播滑动逻辑中，可见书籍的DOM顺序与视觉顺序一致（你的现有滑动逻辑已满足此条件）
• 始终结合ARIA属性，覆盖屏幕阅读器用户的无障碍需求

内容的提问来源于stack exchange，提问作者liberty_bell_7