html - ADA - 屏幕阅读器在进入屏幕时未阅读

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 标签，如 aria-label。我的假设错了吗？我需要做什么才能完成这项工作？

Answer 1

如果你想在你的按钮周围有一个组标签，当焦点移动到组中时会被读取，然后使用 role='group'和 aria-label在容器上。当您按 Tab 键转发到组(“新客户”)时，将读取组标签 和 当您向后 TAB 进入组(“现有客户”)时。

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

上面的例子没有在视觉上显示文本“主菜单”。如果您想使用，您仍然可以显示它:

<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>