0

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

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>

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

4

1 回答 1

1

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

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

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

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

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

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

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

于 2017-03-12T21:32:29.473 回答