【问题标题】:Announcing state with aria-expanded使用 aria-expanded 宣布状态
【发布时间】:2021-07-28 17:18:50
【问题描述】:

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

【问题讨论】:

  • 您可以尝试以下方法吗?与其立即将选项集中在扩展组合框上,不如将其延迟一小段时间(50、100 或 200 毫秒)。也许这将为屏幕阅读器留出足够的时间在所选选项之前宣布展开状态。告诉我。如果它有效,我会发布一个实际的答案。
  • 感谢@QuentinC。如果我添加延迟,VoiceOver 会开始宣布按钮状态并中断句子中间以阅读选项。我对解决方法不太感兴趣,我想了解此行为是否构成实际的可访问性问题以及我的实现是否正确...

标签: accessibility wai-aria voiceover screen-readers nvda


【解决方案1】:

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

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

此外,如果您在编写部分匹配项后退出控件,然后将其返回到控件中,它是否会自动扩展列表以包含匹配项并添加aria-expanded="true"?

如果是这样,那么您已经正确实现了它,因为预期的行为是:

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

这就是为什么在组合框上需要aria-expanded,这是为了当您重新输入它以便了解状态时(或者如果组合框是预先填充的,它应该自动扩展然后aria-expanded="true" !)。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2021-12-26
    • 1970-01-01
    • 2021-02-11
    • 1970-01-01
    • 1970-01-01
    • 2017-02-17
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多