如何使用 JavaScript 確定屏幕閱讀器會讀取什么內容？

Question

我有一個已經可以使用 iOS 和 Android 設備訪問的 Web 應用程序，但我正在嘗試在沒有屏幕閱讀器的設備上進行相同的操作。 我有一個應用程序外殼形式的解決方案，我可以在其中啟動我的 Web 應用程序； shell 可以像 Talk Back 一樣導航/操作元素，沒有問題......實際上，我已經使用替代屏幕操作設備為行動不便的人實現了可訪問性。

我還需要支持屏幕閱讀器，我不知道是否有辦法（在 JavaScript/Typescript 中）檢索給定按鈕應該讀取的內容。 例如，如果顯示一個標題為“下一步”的按鈕，我想檢索文本“下一步，按鈕”或類似的內容。

有沒有基於標准的方法來做到這一點？ 或者，是否有其他人已成功使用第三方庫來解決類似問題？ 還是我注定要自己寫？

澄清一下：我可以訪問 JAWS 和 NVDA 並且已經在它們兩個上驗證了我的解決方案。

TL;DR：我正在尋找一種讓 JavaScript 查詢元素並檢索將要講述的內容的方法，不是為了我自己的啟迪，而是為了我可以將正在講述的信息傳遞給我自己創建的另一個工具.

Answer 1

我認為最好的方法是實際安裝/啟用屏幕閱讀器（例如，macOS 內置了一個），然后閉上眼睛自己聽。

Answer 2

TL; DR：沒辦法

基本上，您無法獲得特定屏幕閱讀器朗讀的字符串，您也無法確定屏幕閱讀器是否已啟動。
更重要的是，不同的屏幕閱讀器以不同的方式傳達信息，甚至此外，用戶可以調整他/她的屏幕閱讀器，因此可以說，下面的例子中，下一個按鈕，按鈕旁邊或旁邊（或播放聲音，而不是說“按鈕”）。 因此，您似乎沒有真正的機會獲得所需的東西。

Answer 3

您正在尋找的是可訪問的名稱計算。 跳轉到第 4.3.1 節“術語”，您將逐步找到算法。

真是夠口的。 我還沒有找到一個好的開源實現。 即使您正確地遵循它，您也會發現已建立的屏幕閱讀器軟件並不總是如此。

您也可以等到 Accessibility API（或AOM 項目）獲得廣泛支持，然后利用它，但誰知道什么時候會發生。

但是，如果您完全控制語音輸出，為什么不與視障用戶合作優化體驗，而不是針對軟件會提出什么？

Answer 4

也許您可以使用Puppeteer 的可訪問性 API來計算給定節點的可訪問性樹是什么樣的。

Accessibility 類提供了檢查 Chromium 的可訪問性樹的方法。 輔助技術（例如屏幕閱讀器或開關）使用可訪問性樹。

我不確定您是否可以准確計算出每個屏幕閱讀器的輸出，但這可能值得一試。