让屏幕阅读器在段落和 div 之间暂停

Question

我一直在尝试为我的 angular 网络应用程序添加辅助功能，但屏幕reader 的输出似乎让我感到困惑。有没有办法让屏幕reader（我正在使用 NVDA）在我页面的阅读行之间暂停？来自 html 的示例：

<footer aria-label="Page Information">
  <div id="versionFooter">
    <p>
      <img id="logo" src="assets/images/xy.svg" alt="Brand Logo"/>
    </p>
    <div class="displayVersion" aria-label="Version Information">
      <p id="backendVersion">
        Backend Version: {{backendVersion.getString()}}
      </p>
      <p id="frontendVersion">
        Frontend Version: {{frontendVersion.getString()}}
      </p>
    </div>
  </div>
</footer>

屏幕 reader 的输出是：

"Page Information contentinfo landmark  Brand Logo Image" 
"Backend Version: 1.2.2  Frontend Version:" 
"1.1.1"

当我用键盘提示下一行时，屏幕reader 会毫不停顿地读取每条引用的行。现在如果它像我想象的那样成功，它应该是：

"Page Information contentinfo landmark"
"Brand Logo Image"
"Version Information"
"Backend Version: 1.2.2"
"Frontend Version: 1.1.1"

每行再次等待下一个键盘提示。

如何让屏幕reader在段落之间暂停，为什么它不使用 aria-label 注册 div？

Answer 1

我没有看到这种行为。我完全复制了您的代码，并在您的代码前后放置了 <button>，这样我就可以在您的代码块之前关注一些内容。我将注意力放在按钮上，然后使用 NVDA 的向下箭头并听到：

Firefox: "页面信息内容信息地标品牌标志"

Chrome: "页面信息内容信息地标图形品牌标志"

（注意，我在 Firefox 上 <img> 后没有听到“图像”。）

宣布下一个向下箭头：

"后端版本：{{backendVersion.getString()}}"

（在 Firefox 和 Chrome 上是一样的。我没有 angular，所以 getString() 没有解析，屏幕 reader 只是宣布它为是。)

我不确定您使用的是什么键来导航，或者您是否更改了可能影响事物的任何 NVDA 设置，但总的来说，您不会强制 NVDA 以某种方式读取。 NVDA 用户习惯于以某种方式阅读事物，所以你不应该乱用它。 NVDA 在使用向下箭头键（假设您正在使用该键）导航时通常会读取容器的全部内容，因此通过添加“虚拟”元素强制在元素之间打断可能会使情况变得更糟，尤其是对于盲文用户。

请注意，您的 aria-label="Version Information" 很可能不会被读取，因为 aria-label 非语义元素上的属性（例如 <div> 和<span> 元素）通常会被忽略，除非您有 role on your element too. See the 3rd last bullet point on "Practical Support: aria-label, aria-labelledby and aria-describedby"

让屏幕阅读器在段落和 div 之间暂停

Make a screenreader pause in between paragraphs and divs

html

accessibility

screen-readers

wai-aria

nvda