1. HTML 中如何避免创建键盘陷阱？前端无障碍设计实操要点
键盘陷阱的典型表现
在网页交互中，键盘陷阱指用户通过键盘导航时被限制在某个区域，无法离开或继续访问其他内容。典型场景包括模态框未正确移除焦点、可聚焦元素被隐藏却保留 tabindex，或自定义组件未暴露可聚焦的按键。
要点是识别那些在视觉上打开但逻辑上冻结的区域。测试焦点环、以及页面加载时的初始焦点设置，是排查的第一步。
用户群体与无障碍设计的关系
无障碍设计的核心用户群体包括使用键盘导航的用户、屏幕阅读器用户和需要简化交互的人。可预测的聚焦顺序能显著降低学习成本。
设计时需考虑不同设备与浏览器的行为差异，避免对焦点的不可达性导致的使用障碍。跨设备一致性是评价设计的关键。
与键盘可聚焦的基本显式规则
确保所有可交互元素都可被键盘聚焦。使用原生按钮、链接和表单控件，避免只用
对于自定义组件，提供明确的聚焦管理与可聚焦标签，必要时使用 <button>、<a href> 等天然可聚焦元素，避免仅通过JS处理聚焦。
2. 设计原则：从无障碍到可用性
可聚焦管理的核心原则
聚焦管理的核心在于保持可预测的焦点路径，避免跳跃式焦点，确保用户从一个控件到下一个控件的转换是线性的。
在页面结构中，先后顺序应与视觉顺序一致。阅读顺序与聚焦顺序一致性对理解至关重要。
正确使用语义标签与ARIA角色
语义标签（如 <button>、<input>、<nav>）能自动提供聚焦行为与键盘交互。
当使用自定义控件时，提供 aria- 的属性以帮助屏幕阅读器，同时要确保键盘操作与屏幕阅读器描述一致。适度使用 ARIA，避免滥用导致的可访问性破坏。
3. 实操要点：实现无障碍的HTML结构与属性
可聚焦的顺序与自然标签
在表单和导航中，遵循自然的标签与顺序，确保 Tab 键的顺序与视觉布局一致。逻辑顺序优先，视觉技巧作为次要。
为模态框、侧边栏等遮罩层提供明确的聚焦策略。关闭前退回原有焦点，防止焦点丢失。
对比与可见焦点样式
可见焦点样式是键盘导航的重要反馈。显式边框或背景高亮能帮助用户确认当前聚焦元素。
确保焦点样式在低对比度下也清晰，必要时使用高对比色与可定制样式。可访问性对比是设计评估的一部分。
键盘事件与焦点控制的代码实践
实践中，可通过监听键盘事件来增强对焦体验，但应避免与浏览器默认行为冲突。keydown/keypress/keyup 的分工要清晰。
下面的示例展示一个简单的焦点陷阱防护逻辑，用于模态框打开时只聚焦模态框内的元素。焦点捕获是避免键盘陷阱的关键。
<div id="modal" role="dialog" aria-modal="true" aria-label="示例模态框"><button id="close" >关闭</button><input type="text" /><button id="action">确认</button>
</div><script>const modal = document.getElementById('modal');const focusable = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');const first = focusable[0];const last = focusable[focusable.length - 1];function trapFocus(e){if(e.key !== 'Tab') return;if(e.shiftKey && document.activeElement === first){e.preventDefault();last.focus();} else if(!e.shiftKey && document.activeElement === last){e.preventDefault();first.focus();}}modal.addEventListener('keydown', trapFocus);
</script>
</div>
// 打开模态框时保存前一个焦点并聚焦模态框
let previousFocus;
function openModal(){previousFocus = document.activeElement;modal.style.display = 'block';modal.querySelector('input').focus();
}
function closeModal(){modal.style.display = 'none';if(previousFocus) previousFocus.focus();
}
4. 常见实现错误与排错方法
忽略隐藏元素的焦点
隐藏或不可见的元素仍可能被聚焦，导致用户无法连续导航。隐藏策略要一致，使用 display:none 或 aria-hidden 的组合。
确保 隐藏内容不可聚焦，并且屏幕阅读器也能正确处理。
错误地使用 tabindex="0" 与 -1
为所有元素都设置 tabindex 会产生混乱的聚焦路径。仅对必要控件设置 tabindex，并遵守可达性最佳实践。
tabindex 的正确用法是在可聚焦元素外观不可定义时作为增强，而不是主导焦点行为。
测试方法：键盘导航实测清单
定期进行键盘导航测试，检查可访问性问题。测试清单应覆盖：聚焦顺序、可访问控件、模态行为，并在不同设备上重复验证。
与视觉测试结合，确认颜色对比、焦点样式在实际使用中是否清晰。综合评估提高可用性。
