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+键盘导航路径可见；移动端点击区域达标，误触率降低