[英]How can I determine the order in which text is read by a screen reader?
I have a created a checkbox component with vue.我用 vue 创建了一个复选框组件。 I am required to create an example checkbox with a two-line label. The first line could be a telephone number and the second line simply says "telephone number".我需要创建一个包含两行 label 的示例复选框。第一行可以是电话号码,第二行仅显示“电话号码”。
<checkbox>
<div class="number">012345678</div>
<div class="source">telephone number</div>
</checkbox>
Is it possible to let a screen reader read the second line (telephone number) first and then the first line (012345678) and if yes, how is it possible?是否可以让屏幕阅读器先阅读第二行(电话号码),然后再阅读第一行(012345678),如果可以,这怎么可能?
It gets read in source order.它按源顺序读取。 You can get around it a little bit by styling them to appear in a different order:您可以通过将它们设置为以不同的顺序出现来绕过它:
.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>
You can use aria-flowto attribute: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-flowto您可以使用aria-flowto属性: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-flowto
With that You can set custom reading order of html sections.有了它,您可以设置 html 个部分的自定义阅读顺序。
Update: I found out that aria-flowto is yet not supported by most of the screen readers.更新:我发现大多数屏幕阅读器还不支持 aria-flowto。 For now JAWS does support it, but NVDA does not.目前 JAWS 支持它,但 NVDA 不支持。 Take a look here: https://www.digitala11y.com/aria-flowto-properties/看这里: https://www.digitala11y.com/aria-flowto-properties/
There are various aria-
attributes that can be used for such purposes.有多种aria-
属性可用于此类目的。
There is for example the aria-labelledby
attribute that you can use to tell which element should be the label for another element.例如,您可以使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.