當焦點從 aria-live 區域 div 獲得輸入字段時，如何防止屏幕閱讀器停止閱讀內容？

Question

我有一個聊天機器人界面，其中帶有 aria-live 屬性的實時區域 div 用於顯示新消息。 實時區域更新正確，屏幕閱讀器開始閱讀內容，但當焦點進入輸入字段時，它會在中間停止閱讀。 這會導致屏幕閱讀器用戶感到困惑，並使他們難以理解新消息。

我正在尋找一種解決方案，以確保屏幕閱讀器繼續閱讀新消息直到它們完成，並且在實時區域更新時焦點管理是正確的。 是否有任何解決方案可以確保屏幕閱讀器及時宣布實時區域更新並正確管理焦點？

屏幕閱讀器： NVDA + Firefox

Answer 1

不幸的是，您既不能確保屏幕閱讀器會完整地閱讀新消息，也不能確定新的傳入消息不會打斷舊消息。 無論是因為任何類型的通知，因為焦點改變，還是其他原因。

aria-live 的禮貌級別

順便記住aria-live=assertive通常意味着總是打斷當前正在說的話，所以這樣做很少是個好主意。 最好保留aria-live=polite 。

正如我自己的觀察所顯示的那樣，您可以幫助小屏幕閱讀器更加穩定，避免許多不必要的中斷/跳過/重復，不過，要非常小心您在實時區域中所做的事情。

焦點改變

但是，特別是當焦點改變時，實時區域消息會被中斷。 您無法阻止屏幕閱讀器在焦點更改時立即通告焦點元素。

原則上，及時獲得此信息比來自實時區域的任何消息更為重要。 對選項卡、箭頭鍵和其他重要鍵的反應對於良好的用戶體驗至關重要，同時始終准確地知道您在哪里以及您可以/應該做什么。

因此，焦點更改幾乎高於一切並且您無法影響它是完全正常的。

避免焦點改變優先於其他一切的最佳方法實際上非常簡單：除非有充分的理由，否則不要意外地移動焦點。

在您的聊天機器人示例中，沒有理由在新消息到達時移動焦點。 如果當用戶按下 enter 鍵提交問題時焦點位於文本框中，只要用戶沒有明確將焦點留在該處，焦點就應該保留在那里。

如果焦點停留在文本框中，那么屏幕閱讀器用戶可以通過 aria-live 自動閱讀回復，並可以在准備好后直接輸入新消息。 談話可以 go 快速流利。

避免靠近焦點的 DOM 更改

避免更改文本框周圍或附近的 DOM。 DOM 的變化，尤其是在使用像 angular 或 react 這樣的框架時，基本上意味着刪除它並再次添加它。 在最壞的情況下，焦點可能會完全丟失，充其量它仍然會造成焦點跳出並再次跳入，從而產生不必要的中斷。

最好的方法是測試在不觸發 DOM 重建的情況下可以更改或不能更改的內容，並因此調整 HTML 結構。

讓用戶控制閱讀消息

不要忘記屏幕閱讀器用戶已經可以退出文本框並按照自己的方式閱讀錯過的消息。 屏幕閱讀器已經有了向后閱讀的快捷方式（NVDA 中的向上箭頭）。 這在文本框內不起作用。

盡管如此，允許聚焦單個聊天消息似乎是最佳實踐。 如果您可以對這些消息執行一些操作，例如回復、編輯或刪除，則尤其如此。

Microsoft Teams 只允許在聊天消息之間進行選項卡導航，但它是一個專用的聊天應用程序。

如果對話嵌入在一個更大的頁面中，它應該被視為一個復合小部件，它只有一個焦點停止，但允許通過垂直箭頭鍵聚焦包含的控件：

作者應該確保復合小部件作為 web 頁面的較大導航系統中的單個導航站存在。 一旦復合小部件獲得焦點，作者應該為用戶提供一個單獨的導航機制，以導航到作為復合元素的后代或擁有的子元素的元素。

Livechat 似乎使用箭頭鍵在消息之間導航