當 div 處於焦點上時，NVDA 讀取 div 的全部內容

Question

我有一種情況，當一個 div 處於焦點時，NVDA 屏幕閱讀器讀取 div 中所有元素的 aria 標簽。

這是我創建的代碼筆，用於重新創建此代碼筆- NVDA 屏幕閱讀器

HTML 中有三個主要的 div，名稱為 class - first-row 、 separator和second-row 。

second-row class 的 div 具有tabindex="0"以使其可聚焦。 這是要求的一部分。 這個 div 還包含 class - header的 3 個子 div， content和footer每個都有帶有aria-label可聚焦元素。 footer子 div 也有tabindex="0"這也是要求的一部分。

當焦點位於second-row或footer時，NVDA 屏幕閱讀器會讀出 div 的所有內容，如下所示

1. second-row - 下面宣布的文字

2. footer - 下面宣布的文字

我們的要求是不要讓 NVDA 公布 div 內容，這會增加用戶的混淆。

問題

1. 這種行為是否正確？ NVDA 屏幕閱讀器是否應該宣布可聚焦 div 的內容？
2. 我可以嘗試在這些可聚焦的 div 上使用aria-hidden="true" ，但這也會鏈接到子元素，因此當焦點在子元素上時，屏幕閱讀器不會宣布它們。 我可以編寫 focus-in 和 focus-out 事件來更新 aria-hidden 的標志，但是還有其他解決方法嗎？
3. 大多數時候，當焦點到達可聚焦 div 的第一個可聚焦元素時，NVDA 不會宣布任何內容。 在 codepen 示例中， footer div 的第一個輸入元素。 這里可能出了什么問題？

Answer 1

您觀察到的行為是絕對正確的。 當一個元素獲得焦點時，可訪問的內容必須完全由屏幕閱讀器閱讀。 它是其功能的核心，告訴用戶現在關注的是什么。

您的根本問題是您有重疊的可聚焦元素。 可聚焦元素絕不能重疊，或者換句話說，可聚焦元素絕不能位於另一個可聚焦元素內。

這樣做會產生幾個問題，例如您在閱讀兩次時觀察到令人困惑的內容。 而且，當焦點位於內部元素時，是否仍應將鍵盤事件發送到兩個元素？ 按什么順序？ 單擊它時出現同樣的問題，哪個元素應該獲得焦點和/或發送事件？ 一個，另一個，或者兩個，會根據情況輪流給你安排。 沒有普遍的正確答案。 知道是在內部還是外部元素並不總是非常清楚：它是文本或圖像的確切形狀，是否考慮透明部分，還是整個矩形區域？ 依賴CSS后台？ 等等。

簡而言之，很容易讓用戶感到非常困惑，所以你必須真正避免它。

對您來說，好消息是您的 tabindex=0 在這里顯得毫無用處。 你應該刪除它們。

當且僅當可以與該元素進行交互時，該元素才必須是可聚焦的。 如果元素不提供任何交互，那么它不應該是可聚焦的。

你會專注於你無能為力的事情嗎？ 最好的情況是浪費能源/效率/時間，因為您必須再次點擊 tab 鍵，而最壞的情況是，這只會讓用戶感到困惑，他們可能不會立即意識到聚焦的元素沒有任何用處。 有什么比在空白處寫作更煩人的呢？

在這里，您的 div 不提供任何交互，因此它們不應該是可聚焦的。 刪除這些完全無用的 tabindex=0 和 voilà，問題解決了。