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

【问题标题】：How can I determine the order in which text is read by a screen reader?如何确定屏幕阅读器阅读文本的顺序？
【发布时间】：2021-08-26 10:17:39
【问题描述】：

我用 vue 创建了一个复选框组件。我需要创建一个带有两行标签的示例复选框。第一行可以是电话号码，第二行简单地说“电话号码”。

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

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

【问题讨论】：

先到者会被阅读，就像您以线性方式阅读一本书一样。只需更改div????的顺序
它将按源顺序读取。虽然tabindex 可能会干扰？
我需要把“电话号码”放在底部，这就是为什么我问是否可以改变屏幕阅读器阅读的顺序我会尝试tabindex方法
那只会改变tabindex。请确保您知道更改它的作用。否则你可能会让它变得更糟。 a11yproject.com/posts/…
您可以随时打开操作系统的阅读器或安装一个。对于任何前端开发人员来说，这都不是一个坏主意。一个解决方案可能是在文档顶部附近放置一个视觉隐藏的电话链接。

标签： javascript html vue.js frontend screen-readers

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：