在模態對話框中讀取聚焦元素后，NVDA讀取所有模態內容

Question

我已經實現了一個要求，即聚焦模態對話框中的第一個選項卡（基本上是<a>元素）。

當使用NVDA屏幕閱讀器測試該功能時，可以看到在讀取對話框標簽和描述（由aria-labelledby和aria-describedby指出）之后，它會讀取聚焦的標簽元素。 但是，之后繼續讀取以模態標題開頭的整個模態對話框內容。 這不是我們想要的閱讀行為。

如果我們將焦點放在模態對話框內的第一個輸入元素上，而不是tab（ <a> ）元素，它可以正常工作。 讀取聚焦輸入元素后，NVDA暫停。 僅當我們使用tab鍵導航時才會讀出更多元素。 這是我們想要的讀取行為，但我們不想關注輸入元素。

演示鏈接可以在這里找到： https ： //codepen.io/kaashan/pen/KOmGYe 。 使用的代碼來自W3.org模式對話框的可訪問性指南，對顯示選項卡進行了少量修改，並將第一個選項卡元素集中在模態打開上。

我正在使用NVDA2019.1.1版本以及最新版本的Chrome和Firefox瀏覽器進行測試。

有人可以幫助解釋在讀取聚焦標簽（ <a> ）元素后暫停NVDA應該怎么做？

Answer 1

您誤解了NVDA是如何使用的。

您嘗試停止的行為是INTENDED行為，並允許用戶查看表單包含的內容，並了解他們將要填寫的內容。

不要試圖讓NVDA按照您希望的方式工作。

只需遵循最佳實踐（如您所做），讓用戶擔心他們希望讀者如何運作。

很難完全測試一些脫離背景的東西，但在你給你的例子中似乎是在正確的軌道上。

要檢查兩件事（在你正在使用的文件中）

1. 模態不會讀取隱藏在選項卡2后面的內容，並且在打開時不會讀取任何其他頁面內容，它應該在閱讀完整模態內容后停止。
2. 您可以使用Escape鍵關閉模態。

希望這可以幫助。

Answer 2

根據此處提到的可訪問性指南，我在對話框中實現了選項卡后，我能夠解決問題。 我注意到只是使用role=tab屬性標記<a>可以解決NVDA的問題。