CSS :focus-visible 键盘无障碍与可点击区域治理实践

概览`:focus-visible` 能区分键盘与鼠标触发的焦点，使键盘用户获得明确的可视反馈而不影响鼠标体验。配合可点击区域治理与状态样式可显著提升可访问性。基础样式button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid oklch(65% 0.2 250); outline-offset: 2px; } /* 鼠标点击不显示粗焦点 */ button:focus:not(:focus-visible) { outline: none; } 可点击区域与状态.btn { min-width: 44px; /* 最小点击尺寸，满足移动端可用性 */ min-height: 44px; padding: 0.5rem 0.75rem; } .btn[aria-disabled="true"], .btn:disabled { opacity: .6; cursor: not-allowed; } .btn:active { transform: translateY(1px); } 组合选择器.field:focus-within { border-color: oklch(70% 0.12 250); } .field input:focus-visible { box-shadow: 0 0 0 3px oklch(85% 0.15 250 / .5); } 治理要点为键盘用户提供清晰焦点；鼠标用户保留简洁视觉。按钮与链接保证最小可点击尺寸；禁用态与按压态明确。与设计令牌统一色彩与尺寸，保持一致性。配合 `prefers-reduced-motion` 减少视觉干扰。验证与指标浏览器：Chrome 120+、Safari 17+、Firefox 120+键盘导航路径可见；移动端点击区域达标，误触率降低