ARIA 屏幕阅读器 - 如何读取角色名称？答案

【问题标题】：ARIA Screen Reader - how to make a role name read?ARIA 屏幕阅读器 - 如何读取角色名称？
【发布时间】：2017-03-12 18:31:57
【问题描述】：

我正在尝试使我的 Web 应用程序更易于访问，我想做的一件事是创建一个角色组，并且应该以特定的方式阅读其中的内容。例如在 UI 上它看起来像一个菜单栏

TITLE
Button1 Button2 Button3

html看起来像

<div class="tab-content-header" role="menubar">
          <span id="{{label}}">{{label}}</span>
          <button type="button" class="btn btn-primary">button1</button>
          <button type="button" class="btn btn-primary">button2</button>
</div>

我希望屏幕阅读器只关注按钮并阅读“按钮 1 按钮，标题”和“按钮 2 按钮，标题”。现在它不是这样读的。有什么想法吗？

【问题讨论】：

标签： html accessibility wai-aria screen-readers wcag2.0

【解决方案1】：

在我回答您的问题之前，请注意您使用的是 role="menubar"，但其中没有任何项目包含 role="menuitem"。我建议您通读 menu bar pattern in the ARIA Authoring Practices 1.1，因为它还定义了您需要的键盘操作此外，在大多数情况下，使用 ARIA 定义菜单是一种告诉用户它的行为就像系统菜单栏一样的方式。如果您不匹配必要的交互，那么您会迷惑用户。

现在，屏幕阅读器将宣布 <button> 的可访问名称作为元素内的文本：<button>Accessible Name</button>

如果你想让它宣布一些额外的文字，你可以使用aria-describedby，虽然它会在暂停后宣布。

所以这可能会得到你想要的：

<span id="Desc">Description text</span>
<button aria-describedby="Desc">Button Text</button>

现在，您声明您希望以特定顺序读取某些内容，并且您希望仅读取按钮，并且您的问题是您希望读取角色名称。这些都是令人困惑的要求，所以我不确定我是否达到了您的目标。

话虽如此，请谨慎断言屏幕阅读器用户应该如何体验您的内容。通常使用 ARIA 来强制作者的理想阅读顺序会使页面更难访问，而不是什么都不做。所以请务必与真实用户进行测试。

【讨论】：