label 必须用 for 属性显式关联 select 的 id（大小写敏感、唯一），禁用视觉靠近或嵌套替代；option 首项应为有效默认值或 disabled+selected 占位；禁用 css 隐藏 select，自定义下拉需透传焦点与键盘事件；ios voiceover 要求 label 与 select dom 相邻。
label 标签必须显式关联 select 元素
仅靠视觉位置靠近或嵌套在 label 里，select 不会被屏幕阅读器识别为可操作控件。必须用 for 属性指向 select 的 id，或把 select 包在 label 内部（推荐前者，更灵活）。
-
label的for值必须与select的id完全一致（大小写敏感、无空格） - 避免使用
aria-label或aria-labelledby替代label—— 它们不触发浏览器原生表单聚焦行为，也无法被所有辅助技术稳定读取 - 如果页面有多个下拉框，每个
id和for必须唯一，不能复用
option 必须用真实文本，禁用纯空格或占位符
屏幕阅读器会逐字读出 option 的文本内容。若第一个 option 是 <option value=""> </option> 或 <option value="">请选择</option>，用户聚焦时会听到“请选择”却无法区分这是提示还是有效选项，易误选。
- 首项应为有效默认值（如
<option value="all">全部类型</option>），或留空但用disabled+selected明确标记为占位 - 禁用
<span aria-hidden="true">*</span>等干扰语音输出的写法 - 避免用 CSS 隐藏文字（如
text-indent: -9999px），屏幕阅读器仍会读出
<label for="category">商品分类</label> <select id="category" name="category"> <option value="" disabled selected>-- 请选择分类 --</option> <option value="book">图书</option> <option value="electronics">电子设备</option> </select>
禁用 display: none 或 visibility: hidden 隐藏 select
即使加了正确 label，若用 CSS 隐藏 select 并用自定义下拉替代（如 div + ul 模拟），屏幕阅读器将完全忽略该控件 —— 因为它已脱离可访问 DOM 流。所有“美化下拉”的方案都必须保留原生 select 并设为 opacity: 0 + position: absolute 覆盖，同时确保键盘焦点能落到它身上。
- 不要用
aria-hidden="true"在select上——这等于主动屏蔽无障碍支持 - 自定义下拉的按钮需用
aria-expanded、aria-controls同步状态，并手动透传键盘事件（如Enter、ArrowDown）到原生select - 测试时务必关闭浏览器样式，确认原生
select仍可 Tab 到、回车展开、方向键切换
移动端 Safari 和 VoiceOver 对 label 绑定特别敏感
iOS VoiceOver 在点击 label 文本时，有时不会自动聚焦关联的 select，除非 label 和 select 在 DOM 中相邻且无其他块级元素隔开。这不是 bug，而是其对语义流的严格要求。
立即学习“前端免费学习笔记（深入）”；
- 确保
label和select之间没有<div>、<code><p></p>等非内联容器 - 若必须插入空行或间距，用
margin而非额外 HTML 元素 - 在 iOS 上用 VoiceOver 手势双击
label文本，观察是否触发下拉展开；若不响应，检查 DOM 结构和id/for是否拼写一致
实际中最容易被忽略的是：禁用状态的 select 仍需保持 label 关联。很多团队只在启用时加 label，一加 disabled 就去掉，导致残障用户根本不知道这个控件存在。
