Safari下VoiceOver不朗读自定义Combobox下拉列表项无障碍BUG求助

核心适配背景 #

Safari 对 ARIA 1.2 Combobox 模式的无障碍解析逻辑和 Chromium 系浏览器存在差异，尤其对动态渲染的下拉节点的属性识别、显隐切换的解析有特殊要求，这是该问题仅在Safari出现的核心原因。

可落地修复方案 #

1. 基础ARIA属性强制对齐 #

• 每个下拉列表项必须单独配置：加role="option"、唯一id，动态绑定aria-selected="true/false"标识选中状态，禁止仅依赖父容器属性或者CSS类传递状态
• Combobox输入框必须配置：aria-controls属性值为下拉列表容器的id，aria-expanded属性动态切换true/false对应下拉展开/收起状态
• 下拉列表容器必须配置：role="listbox"，禁止使用menu/menuitem角色组合，VoiceOver对menu角色的交互逻辑和Combobox场景不兼容

2. Safari 特有适配调整 #

• 该调整是高频问题根因：禁止使用display: none/visibility: hidden切换下拉显隐，改为用position: absolute将收起状态的下拉移出可视区域+opacity: 0控制隐藏，展开时改为opacity: 1放回原位。Safari VoiceOver会直接忽略曾设置为display: none的节点，即使后续切换为显示也不会重新扫描节点的无障碍属性
• 下拉展开时主动触发无障碍扫描：给下拉列表容器加tabindex="-1"，下拉展开时用JS调用列表容器的focus()方法，再将焦点切换到首选项/当前选中项，触发VoiceOver重新识别列表内容
• 如果是虚拟滚动下拉：每个渲染的列表项必须明确设置aria-setsize（总选项数）、aria-posinset（当前项序号，从1开始计数），Safari不会自动计算虚拟滚动的选项总数

3. 常见踩坑排除 #

• 仅给列表项内的装饰元素（如图标、分割线）加aria-hidden="true"，禁止给列表项的文本内容节点、列表项本身加该属性
• 列表项的展示文本必须放在真实DOM节点中，禁止用CSS伪元素的content属性渲染文本内容，Safari VoiceOver不会读取伪元素内容

内容的提问来源于stack exchange，提问作者dsoumgit