不能用 display: none 或 visibility: hidden，因二者使 input 彻底退出可访问性树，导致屏幕阅读器不播报、tab 键跳过、click() 在 ios safari 和 webview 中静默失败；应改用 position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0 或 clip-path: inset(100%) 等视觉隐藏但功能保留方案。
直接用 display: none 隐藏 <input type="file"> 会导致屏幕阅读器无法识别、键盘 Tab 无法聚焦、JS 调用 click() 失败——这不是“美化失败”，而是可访问性断链。必须用视觉隐藏但功能保留的方式，且所有交互状态需同步暴露给辅助技术。
为什么不能用 display: none 或 visibility: hidden
这两者会让元素彻底退出可访问树：NVDA、VoiceOver 不播报、Tab 键跳过、input.click() 在部分 Android WebView 和旧版 Safari 中静默失败。尤其 visibility: hidden 在 iOS Safari 中曾导致点击穿透失效，用户点 label 没反应，问题难复现。
-
display: none：DOM 存在但辅助技术完全不可见，且失去所有交互能力 -
visibility: hidden：仍占布局流，但多数读屏器忽略，且某些 WebView 下无法触发文件选择器 - 安全替代方案是：
position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;—— 元素仍在可访问树中，能被 Tab 焦点捕获，支持 JS 触发，也兼容旧版 IE11+
<label></label> 关联方式选嵌套还是 for？
优先用嵌套：<label><input type="file">上传文件</label>。它无需 ID 配对，语义更紧，避免因 ID 重复或拼写错误导致关联断裂；且现代浏览器（Chrome/Firefox/Safari/Edge）和 iOS/Android WebView 均原生支持嵌套触发。
- 若必须用
for，ID 必须全局唯一、无特殊字符、不以数字开头（如id="file-upload-1"合法，id="1file"在部分旧解析器中异常） - 不要给
<input>加tabindex="-1"：这会主动剥夺键盘可访问性，违背 WCAG 2.1 SC 2.1.1 -
<label></label>自身需有明确角色：添加role="button"并监听Enter和Space键（否则键盘用户点不了）
如何让已选文件名、禁用态、错误提示真正可访问？
纯 CSS 无法读取 input.files 或响应 disabled 属性变化，必须靠 JS 同步更新 ARIA 状态并注入文本内容，否则屏幕阅读器永远只读“上传文件”，不知道“已选 2 个 PNG 文件”或“该功能已禁用”。
- 监听
change事件后，用aria-describedby指向一个实时更新的<span></span>区域，而非直接改<label></label>文本（否则读屏器可能不重读） - 禁用时，给
<label></label>加aria-disabled="true"并设pointer-events: none，同时移除role="button"和键盘事件监听——仅加disabled属性到<input>对 label 无效 - 错误提示需用
aria-live="polite"容器包裹，且 DOM 插入位置要靠近控件（不能塞 footer 里），否则读屏器跳过
移动端和高对比度模式下的关键陷阱
Android Chrome 和 iOS Safari 对 opacity: 0 的点击热区判定比桌面端更敏感，而 Windows 高对比度模式会强制重绘所有 opacity 元素为不透明——这时隐藏的 <input> 会突然“露出来”，破坏 UI。
- 保险做法：用
clip-path: inset(100%)替代opacity: 0（支持 Safari 15.4+、Chrome 102+），或回退到clip: rect(0 0 0 0)（IE11 兼容） - 高对比度模式下，确保
<label></label>的背景色与文字色满足 WCAG AA 级对比度（≥ 4.5:1），别依赖图片或渐变 - 不要给父容器设
overflow: hidden：iOS Safari 可能裁剪掉<input>的点击区域，导致点击 label 无响应
最易被忽略的点是：所有 JS 维护的 ARIA 状态（aria-expanded、aria-checked、aria-live 内容）必须在每次 DOM 更新后立即同步，延迟哪怕一帧，屏幕阅读器就可能读到过期信息。这不是“锦上添花”，而是和 enctype="multipart/form-data" 一样，是文件上传功能能被真实用户使用的底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
