答案：直接覆盖原生控件样式易破坏可访问性，因appearance: none或all: unset会剥离焦点响应、键盘事件和屏幕阅读器识别能力；正确做法是隐藏但保留input功能，用:focus-visible提供替代焦点环，并确保label关联与状态同步。
重构时直接用 CSS 覆盖原生控件样式，最容易让 button、input[type="checkbox"]、select 等失去可访问性——不是功能坏了，而是屏幕阅读器读不到、键盘焦点进不去、表单逻辑断掉。核心问题不在“样式改了”，而在“语义和行为被悄悄剥离”。
为什么重置样式会破坏可访问性
很多团队用 * { all: unset; } 或 button { appearance: none; } 开头，以为只是清掉默认样式。但这些操作实际抹掉了浏览器内置的可访问性钩子：
-
appearance: none会禁用原生 focus 样式、:focus-visible响应、以及部分平台对button的键盘事件绑定（如空格/Enter 触发） -
all: unset清掉cursor: pointer、user-select: none等辅助交互属性，导致屏幕阅读器无法识别可操作状态 - 重写
outline为outline: 0而不提供替代聚焦视觉反馈，键盘用户立刻“失焦”
保留可访问性的样式重置方案
不是不能重置，而是必须补全被移除的可访问性支撑点。以下写法已在 Chrome 128、Safari 17.6、Firefox 127 实测有效：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
button {
/* 允许重置外观，但保留交互能力 */
appearance: none;
-webkit-appearance: none;
/* 必须显式恢复键盘行为支持 */
cursor: pointer;
user-select: none;
/* 替代 outline，且兼容 :focus-visible */
outline: 2px solid transparent;
outline-offset: 2px;
}
button:focus-visible {
outline-color: #0066cc; /* 可见焦点环 */
}
- 永远不要用
outline: 0或outline: none—— 它直接切断键盘用户路径 -
appearance: none后必须手动补cursor和user-select，否则 NVDA + Chrome 组合下按钮会被跳过 - 聚焦样式必须响应
:focus-visible，而非仅:focus，避免鼠标用户看到干扰环
自定义 checkbox/radio 时的硬性要求
用伪元素重绘 input[type="checkbox"] 时，原生 input 本身不能 display: none 或 visibility: hidden —— 否则表单提交、form.elements 查找、checkValidity() 全部失效：
- 正确做法：用
position: absolute; opacity: 0; width: 1px; height: 1px;隐藏但保留在 DOM 流中 - 错误做法：
display: none或visibility: hidden—— 屏幕阅读器彻底忽略，form.reset()不重置它 - 必须保留
for关联的label，且 label 内不可嵌套其他可聚焦元素，否则 TalkBack 会误判焦点归属 - 状态同步靠监听
change事件，而非仅靠 CSS:checked伪类 —— 后者不触发屏幕阅读器播报
第三方 UI 库嵌入时的隔离策略
当引入 Bootstrap、Material Web Components 等库，它们的 CSS 常覆盖原生控件的 min-width、padding、line-height，导致触摸目标小于 48×48px 或文字被裁剪：
- 用 ID 包装器提升特异性：
#my-app button比.btn优先级高，避免依赖!important - 强制最小触摸尺寸：
button, [role="button"] { min-width: 48px; min-height: 48px; } - 对
select元素，禁止用transform: scale()缩小——Safari 会丢失原生下拉箭头和键盘导航支持 - 检查
font-size是否被设为0.875rem以下，WCAG 要求正文至少 16px（等效），小字号会放大阅读障碍用户负担
真正难的不是写出“看起来一样”的样式，而是每次覆盖前都问一句：这个改动会让键盘用户按几次 Tab 才能到达这里？屏幕阅读器会把这行字读成“按钮”还是“没名字的 div”？表单提交时它的值还在不在？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
