用 aria-expanded 宣布状态

如何解决用 aria-expanded 宣布状态

我按照 ARIA 指南制作了一个可访问的选择组件。它是一个 combobox 并按照规定使用 first_open 来宣布下拉列表的状态。当用户第一次进入组件时，它工作正常：屏幕阅读器宣布状态（我测试了 VoiceOver/Safari 和 NVDA/Chrome）。但是在打开时，焦点移动到一个选项，并且由于组合框不是焦点，所以不会宣布状态。我注意到 w3.org's own example 上的相同行为这是预期的行为还是应该纠正？如果是这样，怎么做？

解决方法

对于您使用的模式，这是您描述的一小部分功能的预期行为。

需要检查的一件事是，如果我输入了一个不匹配的选项，它是否会将状态切换回 aria-expanded="false"？

此外，如果您在写入部分匹配后退出控件，然后用 Tab 键返回，它会自动扩展列表以包含匹配项并添加 aria-expanded="true"？

如果是这样，那么您已经按照预期的行为正确实现了它：

第一次访问组合框时未输入任何内容 collapsed。
开始输入项目并选择相关项目，没有状态公告。
未完成选择就离开组合框。
重新输入组合框，如果您输入了有效选项或有效选项的一部分，列表就会出现，并且您应该听到 expanded。
或者重新输入组合框，列表不应该出现，因为您输入的字符串在列表中没有匹配项，您应该听到 collapsed。

这就是为什么在组合框上需要 aria-expanded 的原因，它是为了当您重新输入它以便您知道状态（或者如果组合框是预先填充的，它应该自动扩展然后使用 { {1}}！）。