Focus-visible 焦点可见与键盘导航可访问性治理实践

Focus-visible 焦点可见与键盘导航可访问性治理实践概述focus-visible 依据用户输入方式（键盘/非键盘）显示焦点样式，提升可访问性并减少多余视觉干扰。核心概念与参数输入法区分：键盘触发显示焦点，鼠标点击则常隐藏，避免误导。焦点管理：配合 `inert`、`tabindex`、语义控件保证焦点路径稳定。语义属性：结合 ARIA 与原生控件实现高可信的交互基础。实践示例/* 基础可访问性焦点 */ :where(button, a, input, textarea) { outline-offset: 3px; } /* 针对键盘用户显示更明显的焦点 */ :focus-visible { outline: 3px solid oklch(60% .15 230); } 回退策略：在不支持环境使用 :focus 加上输入法检测（keydown 标记）提供近似行为；避免完全移除焦点样式。验证方法支持矩阵：Chrome 86+、Safari 15.4+、Firefox 85+。键盘路径：使用 Tab/Shift+Tab 验证对话框/弹层/菜单等组件的焦点循环与可达性。可访问性审查：与读屏器测试（NVDA/VoiceOver）交叉核验。注意事项不要在交互控件完全移除焦点样式，确保键盘可用性。弹层/对话框中提供焦点陷阱与关闭路径，防止穿透。与 Popover/Dialog 原生语义协作，减少自定义复杂度。参考MDN：focus-visible；WAI-ARIA Authoring Practices