让 JAWS 宣布 aria-selected 状态

Question

我有一个带有选项卡式导航的页面，我需要让 JAWS 宣布选项卡状态。例如：

      ________
 Shop | Cart | Recent orders | Profile
--------------------------------------

当用户在上面的标签中移动时，JAWS 应该说类似

商店标签；未选中
（标签）
大车;已选择
（标签）
最近的订单;未选中
（标签）
轮廓;未选中

我在上面的括号中有“(Tab)”，我的意思是 JAWS 说的是“tab”这个词，因为按下了 Tab 键在导航选项卡之间移动。

目前，JAWS 不会说出“未选中”和“选中”这两个词，但其余的都是。我正在使用类似的标记

<a aria-selected="false" href="profile.html" id="profileTab">

官方 JAWS 文档（在线转载here）表明 JAWS 识别 aria-selected，但没有说明该属性有什么影响。

我可以在我的页面源代码中看到 ARIA 标记，但据我所知，JAWS 并没有大声朗读它，或者根本没有用它做任何事情。如何让 JAWS 说出“已选择”和“未选择”（或类似内容）？

Answer 1

authoring practice 在选项卡控件上有一个很好的部分。 demo site 像你一样使用aria-selected，但是当我刚刚测试它时，它在 JAWS 和 Internet Explorer 上听起来不错，尽管演示是在 <button> 而不是链接上设置 aria-selected。

您使用的是什么浏览器？
最新版本的 JAWS？

此外，选项卡控件通常使用箭头键在选项卡之间导航（参见前面提到的“创作实践”）而不是 tab 键，但这不应该影响是否读取 aria-selected与否。

（作为一个有趣的事实，您可以在每次按 tab 键时关闭 JAWS 的“tab”公告。我经常使用 JAWS，不需要它来告诉我当我按 Tab 键时。这只是音频混乱（对我而言）。Ins+J > 实用程序 > 设置中心 > 管理键标签 > Tab > 切换静音）

更新 抱歉，一时脑洞大开。我忘了提到role="tab"。这就是导致你的问题的原因。 aria-selected 在role="button" 或role="link" 上无效，但在 在role="tab" 上有效。见“Allowed ARIA roles, states and properties”

将您的代码更改为

<a aria-selected="true" href="profile.html" id="profileTab" role="tab">

它应该可以工作。