使用 aria-expanded 声明状态
Announcing state with aria-expanded
我按照 ARIA 指南制作了一个可访问的 select 组件。它是一个 combobox 并按规定使用 aria-expanded
来宣布下拉列表的状态。
当用户第一次进入组件时它工作正常:屏幕阅读器宣布状态(我测试了 VoiceOver/Safari 和 NVDA/Chrome)。但是在打开时,焦点会移动到一个选项,并且由于组合框不是焦点,因此不会宣布状态。
我注意到 w3.org's own example 上的相同行为
这是预期的行为还是应该补救?如果可以,怎么办?
对于您所使用的模式,这是您描述的一小部分功能的预期行为。
不过要检查的一件事是,如果我键入一个不匹配的选项,它会不会将状态切换回 aria-expanded="false"
?
此外,如果您在编写 部分匹配 后跳出控件,然后又跳回控件,它会自动扩展列表以包含匹配并添加 aria-expanded="true"
?
如果是这样,那么您已经正确实施了它,因为预期的行为是:
- 第一次访问未输入任何内容的组合框
collapsed
被说出。
- 开始输入项目并选择相关项目,无状态公告。
- 不完成选择就离开组合框。
- 重新输入组合框,如果您输入了有效选项或部分有效选项,列表应该会出现,您应该会听到
expanded
.
- 或者重新输入组合框,列表不应出现,因为您键入的字符串在列表中没有匹配项,您应该听到
collapsed
.
这就是组合框需要 aria-expanded
的原因,它用于当您重新输入它时了解状态(或者如果组合框已预先填充,它也应该自动展开aria-expanded="true"
!).
我按照 ARIA 指南制作了一个可访问的 select 组件。它是一个 combobox 并按规定使用 aria-expanded
来宣布下拉列表的状态。
当用户第一次进入组件时它工作正常:屏幕阅读器宣布状态(我测试了 VoiceOver/Safari 和 NVDA/Chrome)。但是在打开时,焦点会移动到一个选项,并且由于组合框不是焦点,因此不会宣布状态。
我注意到 w3.org's own example 上的相同行为
这是预期的行为还是应该补救?如果可以,怎么办?
对于您所使用的模式,这是您描述的一小部分功能的预期行为。
不过要检查的一件事是,如果我键入一个不匹配的选项,它会不会将状态切换回 aria-expanded="false"
?
此外,如果您在编写 部分匹配 后跳出控件,然后又跳回控件,它会自动扩展列表以包含匹配并添加 aria-expanded="true"
?
如果是这样,那么您已经正确实施了它,因为预期的行为是:
- 第一次访问未输入任何内容的组合框
collapsed
被说出。 - 开始输入项目并选择相关项目,无状态公告。
- 不完成选择就离开组合框。
- 重新输入组合框,如果您输入了有效选项或部分有效选项,列表应该会出现,您应该会听到
expanded
. - 或者重新输入组合框,列表不应出现,因为您键入的字符串在列表中没有匹配项,您应该听到
collapsed
.
这就是组合框需要 aria-expanded
的原因,它用于当您重新输入它时了解状态(或者如果组合框已预先填充,它也应该自动展开aria-expanded="true"
!).