如何为JavaScript轮播滑块的导航箭头正确设置tabindex属性

故障和「是否给全页面元素配置tabindex」无关，你的代码存在三个直接问题：

• 无href属性的<a>标签默认不属于浏览器可聚焦元素，本身就不会被纳入Tab键的焦点队列
• 你把tabIndex赋值逻辑写在了onclick回调内，这段代码只有点击箭头时才会触发，页面初始加载时两个箭头根本没有配置tabindex属性，自然无法被聚焦
• 存在语法错误：plusSlides(-1).tabIndex = '3'的写法完全不成立，plusSlides是轮播切换函数，默认不会返回对应的DOM元素，代码执行时会直接抛出JS错误，哪怕用户点击了箭头也无法完成tabindex赋值
• 额外认知误区：tabindex不需要给全页面元素配置，所有原生可交互元素（按钮、链接、输入框等）默认都会按照DOM渲染顺序自动加入Tab切换序列，只有需要调整焦点顺序、让非交互元素可聚焦时才需要单独配置。

推荐方案：静态属性配置（无冗余JS，兼容性最好） #

直接在标签上静态写入属性即可，优先用tabindex="0"让元素遵循默认焦点流顺序，不要随意设置1、2、3这类正整数的tabindex，会强制打乱页面原生焦点顺序，引发无障碍访问问题：

<a class="prev" href="javascript:void(0)" onclick="plusSlides(-1)" tabindex="0">❮</a>
<a class="next" href="javascript:void(0)" onclick="plusSlides(1)" tabindex="0">❯</a>

这里加href="javascript:void(0)"是为了兼容所有浏览器对<a>标签的聚焦规则，如果不想加href，仅保留tabindex="0"在现代浏览器也可以生效，但前者兼容性更稳妥。

备选方案：JS动态赋值（适合需要动态控制焦点状态的场景） #

如果需要通过JS控制属性，要在页面DOM加载完成后就执行赋值，不要把赋值逻辑放在点击事件里：

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('.prev').tabIndex = 0
  document.querySelector('.next').tabIndex = 0
})

无障碍优化建议 #

建议给两个导航按钮补充语义化属性，方便屏幕阅读器识别功能：

<a class="prev" href="javascript:void(0)" onclick="plusSlides(-1)" tabindex="0" aria-label="上一张">❮</a>
<a class="next" href="javascript:void(0)" onclick="plusSlides(1)" tabindex="0" aria-label="下一张">❯</a>

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