NVDA Element Focus issue

Question

We are working on a particular accessibility requirement, where we need to add additional CSS property to our div when it's focused through Accessibility technologies ie VoiceOver (Mac) and NVDA (Windows). Here is our sample code.

//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;
}

On Mac, when I navigate to this div through VoiceOver Keys, it updates the border color to green. On windows, If I navigate to this div through the Tab key, I can see updated green color. But on Windows, when I navigate to this div through NVDA Next Keys, it does not update the border color to green.

So it seems NVDA Next keys do not apply focus to element when it's highlighted/focused through NVDA Next Keys (arrow keys).

I just to learn from the community if there is any way to fix the same on windows.

Answer 1

For most screen readers (JAWS, NVDA, Talkback, VoiceOver on iOS), moving the screen reader focus is separate from moving the keyboard focus. The two usually don't keep in sync. Some screen readers have an option to keep the two in sync but it's up to the user to set it so your code can't rely on it.

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 be applied when navigating with the screen reader focus.

I'm not sure what your intent is but I've never seen an application that tried to apply focus styles to the screen reader focus. In general, the browser doesn't know that a screen reader is running so it doesn't know that screen reader focus moved.

You can still apply your styles if you move the real keyboard focus to it using tabindex="0" but it's a best practice to not allow the keyboard focus move to a non-interactive element.