纯 CSS 实现全平台自适应无障碍 UI 可行，但须守住三条底线：禁用 appearance: none、保留 focus-visible、响应 prefers-reduced-motion 与 prefers-color-scheme；appearance: base-select 更安全，兼顾样式控制与原生可访问性；推荐用容器查询替代视口媒体查询。
纯 CSS 实现全平台自适应无障碍 UI 是可行的，但必须放弃“一套样式打天下”的幻想——关键不在“能不能写”，而在于是否守住三条底线：appearance: none 不能乱用、focus-visible 必须显式保留、prefers-reduced-motion 和 prefers-color-scheme 必须参与样式计算。
为什么 appearance: base-select 比 appearance: none 更安全
很多开发者一上来就对 select 加 appearance: none，以为能彻底接管样式。结果是：Safari 下焦点框消失、Windows 高对比度模式下控件不可见、NVDA 屏幕阅读器跳过整个元素。现代方案应优先尝试 appearance: base-select（已进入 Chrome 125+、Firefox 128+、Safari 17.4+ 的稳定支持）。它允许你重置边框、背景、箭头图标，同时保留原生焦点管理、键盘导航（ArrowUp/Down）、Enter 确认、Escape 关闭等行为。
实操建议：
- 先写
select { appearance: base-select; }，再叠加background-image替换默认箭头（用url(data:...)内联 SVG 更可靠） - 禁用
outline前，务必补上:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; } - 在 Safari 中测试时，打开「系统设置 → 辅助功能 → 显示 → 增加对比度」，确认下拉箭头仍清晰可辨
用容器查询替代视口媒体查询做响应式
当组件被嵌入卡片、侧边栏或弹窗时，@media (max-width: 768px) 完全失效。真正起作用的是容器查询（Container Queries），它让组件根据自身容器宽度而非整个视口做响应。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 给父容器加
container-type: inline-size;（推荐用container-name: card;避免命名冲突） - 在子组件中写
@container card (width - 不要依赖 JS 测量容器尺寸——CSS 容器查询是声明式、无布局抖动、且自动响应 resize 的
- 注意兼容性：Chrome/Firefox/Safari 最新版均支持，Edge 116+；旧版需用
@supports (container-type: inline-size)包裹并提供降级
无障碍不是加 aria-label 就完事
很多框架声称“支持 A11y”，但实际只在按钮上加了 aria-label，却没处理键盘焦点流。真实问题常出现在模态框、折叠面板、动态表单中。
实操建议：
- 模态框打开时，用
inert属性冻结背景内容（比aria-hidden="true"更可靠，且原生支持焦点隔离） - 折叠面板的触发按钮必须带
aria-expanded，且值要随状态实时更新（CSS 无法驱动该属性，需 JS 控制，但样式可响应：[aria-expanded="true"] + .panel { max-height: 500px; }） - 所有交互元素必须有
:focus-visible样式，且不能被!important覆盖；检查 DevTools 的 Accessibility 面板中 “Focusable” 是否为 true - 颜色对比度别信变量名——用 DevTools 的颜色拾取器点开真实渲染色值，验证是否 ≥ 4.5:1（尤其深色模式下的
input::placeholder）
最易被忽略的一点：无障碍不是“加功能”，而是“不破坏”。一个没写任何 ARIA 的 button，只要没覆盖 outline、没移除 tabindex、没用 display: none 隐藏内容，它就是无障碍的。过度干预，反而容易翻车。
