17370845950

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 是   或 请选择，用户聚焦时会听到“请选择”却无法区分这是提示还是有效选项，易误选。

• 首项应为有效默认值（如 全部类型），或留空但用 disabled + selected 明确标记为占位
• 禁用  、* 等干扰语音输出的写法
• 避免用 CSS 隐藏文字（如 text-indent: -9999px），屏幕阅读器仍会读出

商品分类

  -- 请选择分类 --
  图书
  电子设备

禁用 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 之间没有 、
  等非内联容器
• 若必须插入空行或间距，用 margin 而非额外 HTML 元素
• 在 iOS 上用 VoiceOver 手势双击 label 文本，观察是否触发下拉展开；若不响应，检查 DOM 结构和 id/for 是

  

  否拼写一致

实际中最容易被忽略的是：禁用状态的 select 仍需保持 label 关联。很多团队只在启用时加 label，一加 disabled 就去掉，导致残障用户根本不知道这个控件存在。