label未显式绑定input[type=file]时，读屏软件仅播报“浏览”等通用提示，无法识别业务语义；必须用for+id严格匹配实现显式关联，并配合accept、aria-multiselectable等属性提升可访问性。
label 标签没包住 input[type=file] 就别指望读屏能识别
盲人读屏软件（如 NVDA、VoiceOver）依赖语义化 HTML 来播报控件作用。如果 <input type="file"> 没被有效的 <label> 关联，读屏通常只会念“浏览”或“未命名按钮”，完全不提“上传头像”“提交简历”这类业务意图。
必须用显式关联（for + id），不能只靠视觉包裹：
<!-- ✅ 正确：label 显式绑定 --> <label for="avatar-upload">上传您的头像</label> <input type="file" id="avatar-upload" name="avatar"> <p><!-- ❌ 错误：仅靠嵌套但没 id/for，部分读屏仍无法识别 --> <label>上传您的头像<input type="file" name="avatar"></label>
- 确保每个
input[type=file]有唯一id，且对应label的for值完全一致（含大小写） - 避免多个文件输入共用一个
id—— 这会导致读屏随机播报或静默 - 不要用
aria-label替代label：部分旧版读屏（尤其 IE + JAWS 组合）对aria-label支持不稳定
accept 属性缺失会让读屏用户盲目选择所有文件类型
默认情况下，<input type="file"> 在 Windows 上会显示“所有文件 (*.*)”，读屏直接播报“所有文件”，用户根本不知道该传 PNG 还是 PDF。加上 accept 后，系统原生文件对话框会过滤类型，读屏也能同步播报限制条件（如 “PNG 图像文件”）。
- 写具体 MIME 类型比扩展名更可靠：
accept="image/png,image/jpeg"优于accept=".png,.jpg" - 多类型用英文逗号分隔，不要空格：
accept="application/pdf,application/msword" - 如果业务允许图片+PDF，不要漏掉
application/pdf—— 仅写.pdf在 Safari 中可能失效 - 注意：
accept是提示性限制，后端必须二次校验，不能当安全措施
需要支持多文件上传？别忘了 aria-multiselectable
当使用 multiple 属性时，读屏默认仍按单选控件处理，不会主动提示“可选择多个”。加上 aria-multiselectable="true" 才能让 NVDA 等明确播报“多选模式已启用”。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
<label for="docs">上传合同与身份证（支持多文件）</label>
<input type="file" id="docs" name="files" multiple
accept="image/jpeg,image/png,application/pdf"
aria-multiselectable="true">-
aria-multiselectable必须配合multiple使用，单独加无效 - 不要写
aria-multiselectable="yes"或"1"—— 只接受"true"或"false" - 如果界面还提供了手动删除某文件的功能，需同步管理
aria-selected状态（较复杂，建议优先用标准<input multiple>+ 清空重选）
隐藏了浏览按钮？display: none 或 visibility: hidden 会直接砍掉读屏路径
很多 UI 库或自定义样式会把原生 <input type="file"> 设为 display: none，再用伪元素或按钮模拟触发。但读屏软件一旦检测到 display: none 或 visibility: hidden，就彻底忽略该元素 —— 即使你用 click() 触发，它也“看不见”这个控件。
- 正确做法是用
position: absolute; clip: rect(0 0 0 0);或clip-path: inset(50%);把输入框视觉隐藏但保持可访问性 - 绝对不要给
input[type=file]加tabindex="-1"—— 它本应自然获得焦点，移除后键盘用户无法操作 - 如果用了
label触发，确保label本身可聚焦（例如加tabindex="0"）且有明确角色，否则键盘用户 Tab 到 label 后按回车也无法唤起文件对话框
实际中最容易被忽略的，是 label 和 input 的 id/for 不匹配，以及用 display: none 隐藏文件输入框 —— 这两个问题会让整套无障碍逻辑彻底失效，且在开发阶段几乎无法自查，必须用真实读屏软件（NVDA + Firefox 或 VoiceOver + Safari）手动测试。
