Question

我的html如下（摘录部分）：

<h1><span>Main Menu</span></h1>
<div>
    <button tabindex="0">New Customer</button><br>
    <button tabindex="0">Existing Customer</button>
</div>

我正在使用NVDA。当用户进入屏幕时，焦点在第一个按钮上。 NVDA读取第一个按钮（新客户）上的文本。它会跳过标题（h1）。我认为它应该读取h1标签而不使用像aria-label这样的任何aria标签。我的假设错了吗？我需要做些什么来完成这项工作？

Answer 1

如果您想在焦点移动到组中时读取按钮周围的组标签，请在容器上使用role='group'和aria-label。当您将TAB转发到组中时，将会读取组标签（＆＃34;新客户＆＃34;）和（＆＃34;现有客户＆＃34;）

<div role="group" aria-label="Main Menu">
  <div>
    <button>New Customer</button><br>
    <button tabindex="0">Existing Customer</button>
  </div>
</div>

以上示例未直观显示文本＆＃34;主菜单＆＃34;。如果您想使用，您仍然可以显示：

<div role="group" aria-label="Main Menu">Main Menu
  <div>
    <button>New Customer</button><br>
    <button>Existing Customer</button>
  </div>
</div>

你也可以使用<nav>元素，但是使用你的简短片段，它听起来不像按钮用于导航所以我不推荐这个但是想要显示它的完整性：

<nav aria-label="Main Menu">
  <div>
    <button>New Customer</button><br>
    <button>Existing Customer</button>
  </div>
</nav>

Answer 2

如果您使用脚本将焦点发送到第一个按钮，则屏幕阅读器软件将在此之前跳过标记中的任何内容并直接转到该按钮。您应该能够使用箭头键返回以收听它。

一般来说，最佳做法是让用户通过点击/点按来控制焦点，而不是在页面加载时自动化它们。

ADA - 屏幕阅读器在进入屏幕时未读取<h1>

2 个答案: