NVDA 元素焦點問題

Question

我們正在處理一個特殊的可訪問性要求，當我們通過可訪問性技術（即 VoiceOver (Mac) 和 NVDA (Windows)）關注時，我們需要向我們的 div 添加額外的 CSS 屬性。 這是我們的示例代碼。

//html
<div class="info-box">
   This is a infobox
</div>

//CSS
.info-box {
    background-color: #fff;
    border: 1px solid red;
}
.info-box:focus {
    border: 1px solid green;
}

在 Mac 上，當我通過 VoiceOver Keys 導航到這個 div 時，它會將邊框顏色更新為綠色。 在 windows 上，如果我通過 Tab 鍵導航到此 div，我可以看到更新后的綠色。 但是在 Windows 上，當我通過 NVDA Next Keys 導航到此 div 時，它不會將邊框顏色更新為綠色。

因此，當通過 NVDA Next Keys（箭頭鍵）突出顯示/聚焦元素時，NVDA Next 鍵似乎不會將焦點應用於元素。

如果有任何方法可以解決 windows 上的問題，我只是向社區學習。

Answer 1

對於大多數屏幕閱讀器（JAWS、NVDA、Talkback、iOS 上的 VoiceOver），移動屏幕閱讀器焦點與移動鍵盤焦點是分開的。 兩者通常不會保持同步。 一些屏幕閱讀器可以選擇使兩者保持同步，但由用戶自行設置，因此您的代碼不能依賴它。

A screen reader user can explore the page by using shortcut keys ( H to go to the next heading, T to go to the next table, L to go to the next list, etc) and you typically wouldn't want any focus styles to在使用屏幕閱讀器焦點導航時應用。

我不確定您的意圖是什么，但我從未見過嘗試將焦點 styles 應用於屏幕閱讀器焦點的應用程序。 通常，瀏覽器不知道屏幕閱讀器正在運行，因此它不知道屏幕閱讀器焦點已移動。

如果您使用tabindex="0"將真正的鍵盤焦點移到 styles 上，您仍然可以應用它，但最好不要讓鍵盤焦點移動到非交互式元素。