macOS下VoiceOver+Safari无法正确播报aria-expanded状态问题

以下是可能导致VoiceOver+Safari环境下不播报菜单展开/收起状态的几个常见原因：

• 角色（Role）不匹配：WCAG规范中，触发菜单的按钮应设置role="menubutton"而非仅使用原生<button>标签。Safari的无障碍引擎对角色的匹配要求更严格，只有当按钮拥有menubutton角色时，才会关联aria-expanded属性的状态变化并播报。如果仅用原生按钮而未指定该角色，VoiceOver可能不会识别状态变更。

• aria-expanded属性值类型错误：Safari要求aria-expanded的属性值必须是原生布尔类型（true/false），而非字符串形式的"true"/"false"。如果Angular中使用attr.aria-expanded="{{isMenuOpen}}"这种字符串插值绑定，会导致属性值以字符串形式存在，Safari的无障碍引擎无法正确解析，而Chrome会自动完成类型转换，因此能正常播报。正确的绑定方式应为[aria-expanded]="isMenuOpen"（直接绑定布尔变量）。

• Angular属性绑定的DOM同步延迟：部分情况下，Angular的变更检测机制可能导致aria-expanded属性的DOM更新滞后，而Safari的无障碍引擎不会主动监听Angular的变更，仅在DOM属性即时变化时触发状态播报。这种情况下，可尝试通过ElementRef直接操作DOM元素的ariaExpanded属性，确保状态实时同步。

• Safari版本兼容性限制：较旧版本的Safari对ARIA属性的支持存在缺陷，比如仅在特定角色元素（如menubutton、treeitem）上支持aria-expanded的状态播报，或对动态属性变化的监听不完整。升级Safari到最新稳定版本可解决此类兼容性问题。

• 缺少关联的菜单元素引用：若按钮未通过aria-controls属性关联到对应的菜单元素，Safari的VoiceOver可能无法建立按钮与菜单的关联关系，进而忽略aria-expanded的状态变化。需确保按钮添加aria-controls="菜单ID"属性，且菜单元素的id与该值匹配。

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