如何确定屏幕阅读器阅读文本的顺序？

Question

我用 vue 创建了一个复选框组件。 我需要创建一个包含两行 label 的示例复选框。第一行可以是电话号码，第二行仅显示“电话号码”。

<checkbox>
  <div class="number">012345678</div>
  <div class="source">telephone number</div>
</checkbox>

是否可以让屏幕阅读器先阅读第二行（电话号码），然后再阅读第一行（012345678），如果可以，这怎么可能？

Answer 1

它按源顺序读取。 您可以通过将它们设置为以不同的顺序出现来绕过它：

 .checkbox { display: flex; flex-direction: row-reverse; justify-content: start; }

 <div class="checkbox"> <div class="number">012345678</div> <div class="source">telephone number</div> </div>

Answer 2

您可以使用aria-flowto属性： https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-flowto

有了它，您可以设置 html 个部分的自定义阅读顺序。

更新：我发现大多数屏幕阅读器还不支持 aria-flowto。 目前 JAWS 支持它，但 NVDA 不支持。 看这里： https://www.digitala11y.com/aria-flowto-properties/

Answer 3

有多种aria-属性可用于此类目的。

例如，您可以使用aria-labelledby属性来判断哪个元素应该是另一个元素的 label。

<div class="checkbox">
  <div class="number" aria-labelledby="phone-number-label">012345678</div>
  <div class="source" id="phone-number-label">telephone number</div>
</div>