在屏幕閱讀器中暫停以獲得可訪問性

Question

我一直在使用 Mac OSX 的內置屏幕閱讀器來測試我的網站，我知道它不是最好的，但它是我現在擁有的全部。 但我發現它並沒有在元素的末尾暫停……這是有道理的； 但我發現自己放置了隱藏的句點以使事情可讀：

<div class="breakdown">
    <strong>35</strong> New<span class="visuallyhidden">.</span><br>
    <strong>4</strong> Overdue<span class="visuallyhidden">.</span>
</div>

我覺得這樣做真的很臟，但如果我不這樣做，那么它要么破壞設計，要么在一個無法理解的連續句子中閱讀。

有沒有人有這種事情的經驗可以提供？

Answer 1

如果您在語義上格式化代碼，它應該可以正常工作。 從 HTML 結構的外觀來看，您正在使用<br>標記進行展示。 這不是換行符的目的，因此不是標記的語義使用。

您特別希望每一行都是分開的，因此您應該將它們放在包裝塊級標簽中。 您可以將每一行包裝在p或div標簽中，然后屏幕閱讀器會正確地將它們分開。

Answer 2

當您希望屏幕閱讀器說出與標簽的 html 標記中包含的內容不同的內容時，我建議使用aria-label 。

我會將您的代碼更新為：

<div class="breakdown">
  <span aria-label="35 New.">
    <strong>35</strong> New
  </span>
  <br>
  <span aria-label="4 Overdue.">
    <strong>4</strong> Overdue
  </span>
</div>

有了這個，屏幕閱讀器將在每個時間段停頓一下：

35 新。 4 逾期。

我們專門針對 ChromeVox，但這應該適用於所有屏幕閱讀器。

關於aria-label想法

• 😞 因為有兩個字符串需要維護，如果開發人員錯過更新，它們可能會發散。
• 😄 在本地化字符串時，使用的字符串將來自一個來源並使用兩次，從而減少重復。
• 😄 這就是aria-label的目的，也是我看到它在其他項目中經常使用的方式。
• 😄 aria-label字符串對於人類來說讀取/理解/編輯的速度更快。
• 😄 使用aria-label比隱藏元素少。
• 😄 可以更新測試以在aria-label查找特定字符串。 快照也會捕捉變化，但開發人員必須意識到這一點。

關於隱藏元素的思考

• 😄 減少字符串重復，預本地化。
• 😞 當使用 ChromeVox 快捷方式時，有可能到達一個地方，當用戶通過標簽時，旁白將每個隱藏的逗號/句點視為一個單獨的項目，而實際上它應該只是一個沒有額外標記的句子。
• 😞 帶有大量 html 標記的字符串難以本地化，翻譯人員也難以維護。
• 😞 與aria-label相比，額外的標記讓人感覺很笨拙。 如果用戶選擇屏幕上的文本並且選擇跨越隱藏元素中的內容，則在用戶執行復制命令時將復制隱藏內容，並在用戶執行粘貼命令時粘貼。

考慮到所有優點/缺點，從長遠來看，我敢打賭您會發現選擇aria-label將提供最佳的開發人員、翻譯人員和用戶可訪問性體驗。

如果元素由同級元素的文本內容描述，請考慮使用aria-labeledby來鏈接元素。

---

這個答案是在被問到 6 年后出現的……但希望它會有所幫助。

Answer 3

問這個問題已經有一段時間了，但值得注意的是，問題中提出的技術沒有任何問題。 我可以確認當前版本的 Jaws，Jaws 18.0，將暫停逗號或句點，這與冒號或項目符號等標記不同，這些標記是直接宣布的。 當前版本的 iOS VoiceOver 也可以很好地暫停逗號。 你的標點符號（如果它不是你設計的一部分）可以通過上面建議的僅屏幕閱讀器的 CSS隱藏，或者，在適當的情況下，aria-label 屬性可以包含暫停的標點符號。