[英]How can I determine with JavaScript what a screen reader would read?
[英]How can I determine the order in which text is read by a screen reader?
我用 vue 創建了一個復選框組件。 我需要創建一個包含兩行 label 的示例復選框。第一行可以是電話號碼,第二行僅顯示“電話號碼”。
<checkbox>
<div class="number">012345678</div>
<div class="source">telephone number</div>
</checkbox>
是否可以讓屏幕閱讀器先閱讀第二行(電話號碼),然后再閱讀第一行(012345678),如果可以,這怎么可能?
它按源順序讀取。 您可以通過將它們設置為以不同的順序出現來繞過它:
.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>
您可以使用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/
有多種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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.