时间戳

首页 > 解决方案 > 使用 aria-expanded 宣布状态

accessibility - 使用 aria-expanded 宣布状态

问题描述

我按照 ARIA 指南制作了一个可访问的选择组件。它是一个组合框，aria-expanded按照规定用于宣布下拉菜单的状态。当用户第一次进入组件时它工作正常：屏幕阅读器宣布状态（我测试了 VoiceOver/Safari 和 NVDA/Chrome）。但是在打开时，焦点移动到一个选项，并且由于组合框不是焦点，因此不会宣布状态。我在w3.org 自己的示例中注意到相同的行为 这是预期的行为还是应该纠正？如果是这样，怎么办？

标签： accessibilitywai-ariavoiceoverscreen-readersnvda

解决方案

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

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

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

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

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

这就是为什么aria-expanded在组合框上需要 then 的原因，它是为了在您重新输入它时知道状态（或者如果组合框是预先填充的，那么它也应该自动扩展aria-expanded="true"！）。

推荐阅读