屏幕阅读器在进入屏幕时无法读取<h1>标签

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读取第一个按钮(New Customer)上的文本。它跳过了标题（h1）。我认为它应该读取h1标记，而不带任何aria标签，我这个想法是错误的吗？我需要做什么才能使其正常工作？

- DavidC

---

h1 标签内的跨度是多少？ - msanford

标题在JAWS17/18和NVDA2015.3以及2017.4中都可以正常显示。另外，为什么要将tabindex=0分配给按钮？按钮已经是交互式的并且包含在Tab顺序中。 - J. Afarian

如果用户进入屏幕时焦点设置为第一个按钮（我假设通过在元素上调用.focus()实现），那么用户实际上已经绕过了源顺序中的h1。他们需要按shift+tab回到该标题才能听到它的读音。您可以考虑将h1标记移到按钮下面。这并不能完全解决问题，但似乎是解决此问题的一种方法。 - kdub1312

Answer 1

如果你想要在按钮周围添加一个组标签，在焦点移动到该组时读取，那么请在容器上使用role='group'和aria-label。当你向前TAB进入该组（“New Customer”）和向后TAB进入该组（“Existing Customer”），将会读取组标签。

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

- slugolicious

Answer 2

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

通常最好的做法是让用户通过点击/轻敲来控制焦点，而不是在页面加载时自动化控制。

- stringy