macOS 上的 VoiceOver + Safari 无法正确宣布 aria 扩展状态

Question

在我们的 Angular 应用程序中，我们有一个负责打开菜单的按钮。其上有一个指令，其中包含切换菜单的逻辑。在我们的例子中，菜单只是垂直扩展的元素列表，为用户提供了选项选择。

我们希望使此按钮可访问并遵循所有WCAG。因此，我们对其应用了

aria-expanded

属性。

<button 
  (click)="onClick($event)" 
  (keydown)="onKeydown($event)"
  [attr.aria-label]="'Open menu'"
  [attr.aria-expanded]="isMenuOpen"
  [attr.aria-haspopup]="true">
  Open the menu
</button>

在 Chrome 上，屏幕阅读器会正确宣布展开或折叠状态。然而，当我们尝试在 macOS 上的 VoiceOver + Safari 上执行相同操作时，却没有出现这样的公告。

什么可能导致此问题？

Answer 1

看起来

aria-haspopup

属性导致了这个问题。在 Chrome 上，它不会阻止扩展状态的宣布，但在 Safari 上它最终会阻止。

通过删除

aria-haspopup

ARIA 属性错误已解决。屏幕阅读器现在可以在 Safari 上正确播报“展开/折叠”。如果您不是特别需要上述属性，您可以将其删除并验证它是否有效。