应使用语义化选择器替代纯样式类名，优先采用原生元素如button、nav等，避免过度嵌套和模糊属性选择器，并用:focus-visible精准控制键盘聚焦样式。
用语义化选择器替代 class 堆砌
很多开发者习惯写 .btn-primary、.nav-item-active 这类纯样式类名，但这类选择器对屏幕阅读器和自动化检测工具毫无意义。真正有效的可访问性提升，是从选择器本身传递结构意图开始的。
例如，不要用 .skip-link 隐藏跳过导航链接，而应直接用 a[href="#main"] 或 header nav + a —— 这样不仅语义清晰，还能被 axe 或 Lighthouse 等工具识别为“跳过链接”模式。
- 优先使用原生元素选择器：
button、input[type="checkbox"]、nav、main，它们自带可访问性语义 - 避免过度嵌套：
div div ul li a不如nav a可靠，前者易因 DOM 变动失效，后者绑定语义区域更稳定 - 慎用
[class*="icon"]这类属性选择器——它无法区分装饰性图标与功能性图标，可能误判aria-hidden状态
聚焦状态必须用 :focus-visible 而非 :focus
:focus 会同时作用于鼠标点击和键盘聚焦，导致鼠标用户看到突兀的焦点环；而 :focus-visible 是浏览器原生判断“当前聚焦是否由键盘触发”的机制，兼容性已覆盖 Chrome 86+、Firefox 89+、Safari 15.4+。
错误写法：button:focus { outline: 2px solid #007bff; } → 鼠标点按钮也会亮起轮廓，干扰视觉设计
正确写法：button:focus-visible { outline: 2px solid #007bff; }，再配合 button:focus:not(:focus-visible) { outline: none; } 主动抑制鼠标聚焦样式
- 不要用 JavaScript 模拟
:focus-visible行为——浏览器原生实现更准确，且能响应系统级“减少动画/强调焦点”设置 - 若需支持旧版 Safari（postcss-focus 插件自动降级，但需注意它会为所有
:hover添加:focus，可能污染逻辑 -
outline不要设为0或none—— 即使隐藏，也应保留占位或改用outline-offset调整位置
禁用状态要用 :disabled 而非 [aria-disabled="true"]
input:disabled 和 button:disabled 是浏览器原生支持的伪类，它自动关联到辅助技术（AT）的“不可交互”状态；而 [aria-disabled="true"] 仅是属性，需额外 JS 维护同步，且部分 AT（如旧版 NVDA）识别不稳定。
常见陷阱：用 div[aria-disabled="true"] 模拟禁用按钮 → 屏幕阅读器读作“按钮，已禁用”，但键盘仍可 Tab 进入、Enter 触发，造成逻辑矛盾
- 表单控件一律用原生
disabled属性 +:disabled选择器，不要手动加 ARIA - 自定义组件（如封装的
MyButton）若必须用aria-disabled，则必须同步设置tabindex="-1"并监听keydown阻止 Enter/Space -
:disabled样式中避免仅靠颜色变化表示禁用（如灰度），应叠加opacity、cursor: not-allowed和文字提示
颜色对比检查不能只靠选择器，得结合属性值分析
仅靠 CSS 选择器（如 p、h2）无法判断文本是否满足 WCAG AA 对比度要求——因为 color 和 background-color 可能来自继承、变量或层叠，最终值需运行时计算。
所以，postcss-contrast 这类插件不是在选中元素后“猜”对比度，而是解析 color 与最近的非透明 background-color 声明，再调用色彩空间转换算法得出比例。
- 避免在 CSS 中用
rgba(0,0,0,0.5)叠加背景——半透明白色文字在浅色图上可能低于 4.5:1，但插件无法推断底层图像色值，会漏报 - CSS 自定义属性（
--text-color）需确保被postcss-custom-properties预处理展开，否则postcss-contrast无法读取实际值 - 伪元素内容（
::before { content: "★"; color: var(--star-color); }）默认不参与对比度检查，需显式配置插件启用checkPseudoElements: true
nav a 选择器写得再准，如果对应 HTML 缺少 aria-current="page" 或焦点顺序混乱，照样不可访问。CSS 选择器只是把语义“锚定”在正确位置的第一步。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
