Question

我正在尝试使我的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>

我希望屏幕阅读器只关注按钮并阅读＆＃39;按钮1按钮，标题＆＃34;和＆＃34;按钮2按钮，标题＆＃34;。现在它不会那样读。任何的想法？

Answer 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来强制执行作者理想的阅读顺序会使页面比完全没有任何内容更难以访问。所以请务必与真实用户一起测试。

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

1 个答案: