tabindex作用及键盘导航详解

如果你的自定义组件（比如用 div 或 span 模拟的按钮或菜单项）需要被键盘聚焦，那么给它们设置 tabindex="0" 是最恰当的方式。同时，别忘了添加适当的 ARIA 属性（如 role="button"、aria-label、aria-expanded 等），这样屏幕阅读器才能正确地理解这些元素的角色和状态，为视障用户提供必要的信息。

一个常见的陷阱是，开发者为了视觉效果，会用 div 来代替 button，然后只给 div 加个 tabindex="0"。这解决了聚焦问题，但丢失了按钮的语义。用户可能无法通过空格键或回车键触发“按钮”行为，因为 div 默认不响应这些按键。所以，你还需要额外用 JavaScript 监听键盘事件，来模拟 button 的行为。这无疑增加了代码的复杂性和出错的风险。我的经验是，能用语义化标签就尽量用，别给自己挖坑。

tabindex与JavaScript交互：动态控制焦点

tabindex 与 JavaScript 的结合，主要体现在动态地管理页面焦点。最常见的操作是使用 element.focus() 方法。当用户执行某个操作（例如打开一个模态框、提交表单后显示错误信息、或者切换到一个新的视图）时，你可能需要将键盘焦点移动到特定的元素上，以引导用户的注意力或方便他们继续操作。

例如，一个模态框弹出时，你通常希望焦点自动跳到模态框内的第一个可交互元素（比如一个输入框或关闭按钮），而不是留在模态框后面的页面上。这时，你可以在模态框显示后，立即调用目标元素的 focus() 方法。

function openModal() {
    const modal = document.getElementById('myModal');
    modal.style.display = 'block';
    // 确保模态框本身可聚焦，或者聚焦模态框内的第一个可交互元素
    // 如果模态框本身要接收焦点，可能需要给它一个 tabindex="-1"
    modal.focus(); // 假设模态框有 tabindex="-1"
    // 或者聚焦模态框内的某个按钮
    document.getElementById('closeModalButton').focus();
}

function closeModal() {
    const modal = document.getElementById('myModal');
    modal.style.display = 'none';
    // 关闭模态框后，可能需要将焦点返回到触发模态框的元素，或者其他逻辑位置
    document.getElementById('openModalButton').focus();
}

你也可以通过 JavaScript 动态地修改元素的 tabindex 属性。比如，你有一个复杂的导航菜单，在某些状态下，你可能希望某些菜单项暂时不可通过 Tab 键聚焦（例如，它们是禁用状态或者需要先选择父级）。这时，你可以将它们的 tabindex 设置为 -1。当条件满足时，再将其改回 0。这种动态调整在构建复杂的单页应用（SPA）时会比较常见，但要小心处理，避免在用户不知情的情况下突然改变导航行为。

为什么自定义tabindex顺序通常不是最佳实践？

正如前面提到的，给 tabindex 设置正整数来强制改变元素的 Tab 顺序，几乎总是一个糟糕的主意。我见过太多项目因此陷入维护的泥潭。

首先，它违反了用户对 Tab 导航的直觉。用户通常期望 Tab 键能按照元素在屏幕上的视觉顺序或者在 HTML 代码中的逻辑顺序进行移动。一旦你用 tabindex 正整数打乱了这个顺序，用户会感到困惑和沮丧，因为他们的预期被打破了。这种不一致性极大地损害了可用性，尤其是对于那些完全依赖键盘导航的用户来说，简直是噩梦。

其次，它极大地增加了代码的维护成本。设想一下，你的页面结构稍微调整了一下，比如某个元素被移动了位置，或者添加了一个新的元素。如果你的 Tab 顺序是依赖于 tabindex 的具体数值来精确控制的，那么你可能需要重新评估和调整所有相关元素的 tabindex 值。这就像玩一个高难度的拼图游戏，任何一个改动都可能导致整个序列崩溃。相比之下，如果你的 Tab 顺序是基于自然的 DOM 顺序，那么大多数结构调整都不会影响 Tab 键的逻辑流。

最后，它也容易引入难以发现的 Bug。当多个开发者在同一个项目上工作时，如果每个人都随意使用 tabindex 正整数，那么最终的 Tab 顺序可能会变得非常混乱和不可预测。调试这种问题，寻找是哪个 tabindex 值导致了顺序错误，是非常耗时且令人头疼的。所以，除非有极其特殊且无可替代的理由（这种理由几乎不存在），始终坚持使用 tabindex="0" 或 -1，并让浏览器处理其余的默认 Tab 顺序，这样你的代码会更健壮，用户体验也会更好。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《tabindex作用及键盘导航详解》文章吧，也可关注golang学习网公众号了解相关技术文章。