像 NVDA 這樣的屏幕閱讀器如何自動讀取從 display: none 到 block 的元素？ Aria-live 運行不正常

Question

我有一個復雜的多列表單， NVDA 屏幕閱讀器在頁面加載后可以很好地閱讀，包括 aria-labels、字段、元素順序等。在這種工作場景中，表單在頁面加載時完全可見。

但是，我需要在頁面加載時默認隱藏此表單。 僅當用戶單擊頁面上的“顯示表單”鏈接時，此表單才會出現，將表單從“顯示：無”設置為“顯示：阻止”。

默認情況下，點擊“顯示表單”后閱讀器不會自動閱讀表單。

所以我在表單中添加了 aria-live="polite" 。 當我單擊“顯示表單”鏈接時，讀者將閱讀該表單，但閱讀效果很差 - 事情變得混亂，aria-labels 被忽略，閱讀流程中斷等。

所以我的問題是，使用像 NVDA 這樣的屏幕閱讀器，如何在頁面加載后清晰准確地讀取從 display: none 到 display: block （基於某些用戶交互）的元素？

正如我上面提到的，只有當頁面加載時表單可見時，我才能獲得完美的閱讀。

Answer 1

Aria 現場區域僅在兩種情況下被讀取：

• 當它們被添加到 DOM 中時
• 當他們的內容改變時

在所有其他情況下，沒有正式指定是否必須閱讀它們。 它們適用於某些瀏覽器 + 屏幕閱讀器組合，但不適用於其他一些。

無論如何，閱讀整個表單部分都不是一個好主意。

如果用戶可以很好地期待某些東西出現，那么讓它自然可及比宣布它出現的事實要重要得多。 自然可達，我的意思是通過選項卡和瀏覽器 cursor 命令，如箭頭鍵或從表單元素到表單元素的導航。 特別是，這意味着您應該避免在正文末尾添加新內容，而是將其添加到真正需要的 DOM 中。

正確完成此操作后，您可能會考慮宣布已出現表單部分。 你不應該讓整個新部分都被閱讀，而是堅持一個簡單的一般信息，比如“個人信息部分出現在一般信息下方”。 這種消息必須在 aria live 區域中。 如果從用戶的角度來看，該表單部分出乎意料地出現，則此公告可能非常有用。 如果發生的事情是意料之中的，那么該公告相對來說是可選的，前提是您已將其顯示在正確的位置。