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

Question

我试图使我的Web应用程序更易于访问，而我想做的一件事就是创建一个角色组，并且应该以一种特殊的方式读取其中的内容。 对于用户界面上的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按钮，标题”。

Answer 1

在回答您的问题之前，请注意，您使用的是role="menubar"但是其中没有任何项目包含role="menuitem ”。 我建议您通读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来增强作者的理想阅读顺序会使页面难以访问。 因此，请务必与实际用户进行测试。