键盘导航是确保网页可访问性的关键，通过语义化HTML、合理使用tabindex、JavaScript焦点管理及清晰的视觉反馈，使所有用户（包括残障人士）都能高效操作页面，提升整体用户体验和合规性。
键盘导航，说白了，就是让用户只用键盘就能顺畅地浏览和操作你的网页内容。核心在于管理好用户界面的焦点，确保每个可交互元素都能被Tab键选中，并且按键操作能按预期响应。这不仅仅是为了那些不能使用鼠标的用户，也是提升网站整体可用性和专业度的关键一环。在我看来，这是构建一个真正“好用”的网站不可或缺的基础。
解决方案
实现HTML键盘导航，首先要依赖语义化的HTML结构，这是所有无障碍性的基石。浏览器天生就知道如何处理
<button>、
<a>、
<input>、
<select>等元素的键盘焦点和交互。当你用
<div>来模拟一个按钮时，你就需要额外做很多工作。
具体来说，你需要关注以下几个方面：
-
语义化HTML元素优先： 尽可能使用浏览器原生支持键盘导航的元素。比如，一个点击后有行为的文本，就应该用
<button>
而不是<span>
加onclick
。链接用<a>
，表单控件用对应的<input>
、<textarea>
、<select>
。这能省去你大部分的焦点管理工作。立即学习“前端免费学习笔记（深入）”；
-
tabindex
属性的合理使用：tabindex="0"
：当你有一个非原生可聚焦的元素（比如一个div
），但你希望它能被Tab键选中时，可以给它设置tabindex="0"
。它会按照文档流的顺序进入Tab序列。这在创建自定义组件时很常用。tabindex="-1"
：这个值意味着元素不能通过Tab键被选中，但可以通过JavaScript的element.focus()
方法编程性地获得焦点。这对于在特定情况下需要将焦点移动到某个元素（比如错误信息、模态框内部的特定元素）非常有用，而又不希望它干扰常规的Tab顺序。tabindex="正整数"
：我个人建议尽量避免使用tabindex="1"
、tabindex="2"
这样的正整数值。它们会强制改变Tab键的默认顺序，一旦页面结构发生变化，维护起来简直是噩梦，而且很容易让用户感到困惑。除非你对自己的设计有绝对的把握，并且组件结构非常稳定，否则还是老老实实地让浏览器决定顺序吧。
-
JavaScript进行高级焦点管理： 对于复杂的组件，比如模态框、下拉菜单、选项卡（Tabs）、轮播图等，光靠HTML和CSS是不够的。你需要用JavaScript来：
- 捕获焦点（Focus Trapping）： 在模态框打开时，确保焦点只在模态框内部循环，而不是跳到模态框后面的页面元素上。
- 管理内部导航： 在自定义下拉菜单中，可能需要用上下箭头键来选择列表项。
- 恢复焦点： 当模态框关闭后，将焦点返回到触发模态框打开的那个元素上，这样用户就不会“迷失”在页面中。
-
处理键盘事件： 监听
keydown
、keyup
事件，根据按键（比如Escape
键关闭模态框，Enter
键触发按钮）执行相应的操作。
清晰的视觉焦点指示： 用户需要明确知道当前哪个元素被选中了。浏览器默认会给可聚焦元素添加一个轮廓（outline），但有时候设计师会为了“美观”而移除它 (
outline: none;
)。这是个非常糟糕的做法！如果你真的不喜欢默认样式，请务必提供一个自定义的、清晰可见的:focus
样式，比如改变背景色、添加边框或阴影。
为什么键盘导航对网站无障碍性如此重要？
键盘导航的重要性，远不止我们通常想象的那么简单。它不仅仅是为那些无法使用鼠标的用户提供便利，更是构建一个包容性、高可用性网站的基石。
首先，法律合规性是一个绕不开的话题。全球很多国家和地区都有相关的无障碍性法律法规，比如美国的ADA（Americans with Disabilities Act）和WCAG（Web Content Accessibility Guidelines）。WCAG明确要求所有可交互功能都必须能通过键盘访问。如果你的网站不能满足这些要求，理论上是可能面临法律风险的。
其次，从用户体验的角度来看，键盘导航服务了广泛的用户群体。
- 运动障碍用户： 这是最显而易见的一类。手部颤抖、肌肉萎缩、脊髓损伤等原因可能导致他们无法精确操作鼠标。键盘是他们与电脑交互的主要方式。
- 暂时性障碍用户： 比如手腕受伤、鼠标失灵、或者在不方便使用鼠标的环境下（例如在公共交通工具上，空间狭小），键盘就成了唯一的选择。
- 屏幕阅读器用户： 盲人或弱视用户依赖屏幕阅读器来朗读页面内容。屏幕阅读器通常通过模拟Tab键来导航可聚焦元素，如果你的网站不能良好地支持键盘导航，那么屏幕阅读器用户将寸步难行。
- 效率追求者/高级用户： 很多程序员、数据录入员或者其他对效率有高要求的用户，更喜欢使用键盘快捷键来快速操作，因为这比鼠标点击要快得多。一个支持良好键盘导航的网站，能大大提升他们的工作效率和满意度。
最后，键盘导航也直接关系到网站的鲁棒性。一个能够通过键盘完整操作的网站，通常意味着其底层结构更合理、语义化更好，也更容易被搜索引擎抓取和理解。这虽然不是直接的SEO因素，但间接提升了网站的质量。在我看来，忽视键盘导航，就像是只为一部分人开放了大门，而把另一部分人挡在了外面，这在数字时代是说不过去的。
如何正确使用 tabindex
属性来控制焦点顺序？
tabindex属性是控制键盘焦点顺序的一个强大工具，但它也是一把双刃剑，用不好反而会适得其反。我的经验告诉我，对待
tabindex，要抱着一种“能不用就不用，非用不可再小心翼翼地用”的态度。
1. tabindex="0"
：让非原生元素可聚焦
这是
tabindex最常用且最安全的用法之一。当你有一个
<div>或
<span>元素，它在视觉上看起来像一个按钮或链接，并且你需要它能接收键盘焦点时，就可以给它加上
tabindex="0"。
<div role="button" tabindex="0" aria-label="点击下载文件"> <img src="download.svg" alt=""> 下载 </div>
这里
role="button"和
aria-label也很重要，它们告诉辅助技术这个
div的真实作用。设置
tabindex="0"后，这个
div就会按照它在文档中的自然顺序被Tab键选中。这对于构建自定义组件（比如一个可展开/折叠的面板头部）非常有用。
2. tabindex="-1"
：编程性聚焦，但不参与Tab顺序
tabindex="-1"意味着这个元素不能通过Tab键直接选中，但你可以用JavaScript的
element.focus()方法来强制将焦点设置到它上面。
<div id="error-message" tabindex="-1" role="alert" style="color: red;"> 请输入有效的邮箱地址。 </div> <button onclick="submitForm()">提交</button>
当用户提交表单失败时，你可能希望将焦点直接跳到错误信息上，这样屏幕阅读器用户就能立即听到错误内容。
function submitForm() {
// 假设表单验证失败
const errorMessage = document.getElementById('error-message');
errorMessage.focus(); // 编程性地将焦点设置到错误信息上
}这种用法非常适合处理动态内容更新、错误提示、模态框打开后的首个可交互元素，或者将焦点返回到之前的位置。它不会打乱用户的Tab键导航流程，只在特定逻辑下进行焦点转移。
3. 避免使用 tabindex="正整数"
(如 tabindex="1"
, tabindex="2"
)
说实话，这是我最不推荐的用法。当你给元素设置
tabindex="1"、
tabindex="2"等正整数时，它们会脱离文档流的自然顺序，按照数值从小到大的顺序优先获得焦点。
<!-- 糟糕的实践！ --> <button tabindex="2">第二个按钮</button> <input type="text" tabindex="1"> <a href="#" tabindex="3">第三个链接</a>
这样做会带来几个严重的问题：
-
维护困难： 页面结构一旦调整，你可能需要重新编号所有的
tabindex
，这简直是灾难。 - 用户困惑： 用户习惯了Tab键按照视觉顺序或文档流顺序前进，这种跳跃式的焦点顺序会让他们感到非常困惑，不知道下一个焦点会出现在哪里。
- 无障碍性问题： 屏幕阅读器通常会按照文档流顺序来朗读内容，而焦点却在乱跳，这会严重破坏用户体验。
如果你的设计需要一个非标准的焦点顺序，那通常意味着你的HTML结构本身可能就不够语义化，或者你的UI设计存在缺陷。我的建议是，先尝试调整HTML元素的物理顺序，让它们在文档流中就符合逻辑上的焦点顺序。如果实在无法通过调整HTML结构来达到目的，再考虑使用JavaScript进行更精细的焦点管理，而不是滥用
tabindex的正整数值。保持Tab键的自然流动，对用户来说才是最友好的。
在复杂组件中，如何通过 JavaScript 管理键盘焦点？
在构建像模态框、下拉菜单、选项卡（Tabs）、自动完成输入框或自定义日期选择器这类复杂组件时，光靠HTML和CSS往往无法满足无障碍性要求。这时，JavaScript就成了管理键盘焦点的核心工具，它能帮助我们实现更精细、更符合用户预期的交互行为。
1. 模态框（Modal Dialogs）的焦点管理
模态框是键盘焦点管理中最经典的场景之一。
-
打开时聚焦： 当模态框打开时，焦点应该立即转移到模态框内部的第一个可交互元素（比如一个关闭按钮或表单输入框）。
function openModal() { const modal = document.getElementById('myModal'); modal.style.display = 'block'; const firstFocusableElement = modal.querySelector('button, [href], input, select, textarea, [tabindex="0"]'); if (firstFocusableElement) { firstFocusableElement.focus(); } // 存储触发模态框打开的元素，以便关闭时恢复焦点 document.body.dataset.previousFocus = document.activeElement.id || ''; } -
焦点捕获（Focus Trapping）： 确保当模态框打开时，Tab键的焦点不会跳到模态框后面的页面内容上。这意味着焦点必须在模态框内部循环。这通常需要监听模态框内部的
keydown
事件，特别是Tab
键。modal.addEventListener('keydown', function(e) { if (e.key === 'Tab') { const focusableElements = Array.from(modal.querySelectorAll('button, [href], input, select, textarea, [tabindex="0"], [tabindex="-1"]')) .filter(el => el.tabIndex !== -1); // 排除tabindex="-1"的元素 const firstFocusable = focusableElements[0]; const lastFocusable = focusableElements[focusableElements.length - 1]; if (e.shiftKey) { // Shift + Tab if (document.activeElement === firstFocusable) { lastFocusable.focus(); e.preventDefault(); } } else { // Tab if (document.activeElement === lastFocusable) { firstFocusable.focus(); e.preventDefault(); } } } if (e.key === 'Escape') { // Esc键关闭模态框 closeModal(); } }); -
关闭时恢复焦点： 当模态框关闭时，焦点应该返回到打开模态框的那个元素上。
function closeModal() { const modal = document.getElementById('myModal'); modal.style.display = 'none'; const previousFocusElementId = document.body.dataset.previousFocus; if (previousFocusElementId) { const previousFocusElement = document.getElementById(previousFocusElementId); if (previousFocusElement) { previousFocusElement.focus(); } } }
2. 自定义组件内部导航（例如下拉菜单、选项卡）
对于自定义的下拉菜单或选项卡组件，用户可能期望使用方向键（上、下、左、右）来导航内部选项，而不是仅仅依靠Tab键。
-
下拉菜单/列表：
const dropdownList = document.getElementById('myDropdownList'); let currentSelectedIndex = -1; // 跟踪当前选中项 dropdownList.addEventListener('keydown', function(e) { const items = Array.from(this.children); // 假设子元素是列表项 if (e.key === 'ArrowDown') { currentSelectedIndex = (currentSelectedIndex + 1) % items.length; items[currentSelectedIndex].focus(); e.preventDefault(); // 阻止页面滚动 } else if (e.key === 'ArrowUp') { currentSelectedIndex = (currentSelectedIndex - 1 + items.length) % items.length; items[currentSelectedIndex].focus(); e.preventDefault(); } else if (e.key === 'Enter') { // 模拟点击当前选中项 items[currentSelectedIndex].click(); e.preventDefault(); } });这里，每个列表项可能需要
tabindex="-1"
才能被编程性聚焦，而整个下拉列表容器可能需要tabindex="0"
来接收初始焦点。 -
选项卡（Tabs）： 使用
ArrowLeft
和ArrowRight
键在选项卡之间切换。<div role="tablist"> <button role="tab" id="tab1" aria-controls="panel1" tabindex="0">Tab 1</button> <button role="tab" id="tab2" aria-controls="panel2" tabindex="-1">Tab 2</button> <button role="tab" id="tab3" aria-controls="panel3" tabindex="-1">Tab 3</button> </div> <div id="panel1" role="tabpanel" aria-labelledby="tab1">...</div> <div id="panel2" role="tabpanel" aria-labelledby="tab2" hidden>...</div> <div id="panel3" role="tabpanel" aria-labelledby="tab3" hidden>...</div>
JavaScript会监听
keydown
事件，当用户按下左右箭头时，切换tabindex
和aria-selected
属性，并调用focus()
方法。
3. element.focus()
和 event.preventDefault()
-
element.focus()
： 这是JavaScript中用于将焦点设置到特定元素上的核心方法。确保目标元素是可聚焦的（要么是原生可聚焦，要么设置了tabindex="0"
或tabindex="-1"
）。 -
event.preventDefault()
： 在处理键盘事件时，如果你的自定义行为与浏览器默认行为冲突（例如，按下Tab
键时，你希望焦点停留在模态框内而不是跳出），一定要调用e.preventDefault()
来阻止浏览器的默认行为。
4. ARIA属性辅助
除了焦点管理，ARIA（Accessible Rich Internet Applications）属性也至关重要，它们为辅助技术提供了组件的语义信息。
role="dialog"
、role="tablist"
、role="tab"
、role="tabpanel"
：定义组件类型。aria-labelledby
、aria-describedby
：将元素与可读文本关联起来。aria-expanded
：表示一个可折叠/展开的元素当前的状态。aria-hidden="true"
：当元素不可见或不应被辅助技术访问时使用。
总的来说，JavaScript在复杂组件中的焦点管理是一个细致活。它要求开发者深入理解用户行为、键盘交互模式，并结合ARIA属性，才能构建出既功能强大又无障碍的交互体验。这可能需要一些额外的开发成本，但从长远来看，它大大提升了产品的可用性和用户覆盖面。
