PC Chrome中的a11y：打开JAWS时，向上/向下箭头键导致黄色突出显示

Question

I've been working over the past several months to make a site accessible and a JAWS issue has recently brought to my attention by our QA department.

I've put up a CodePen showing an example similar to what I've built. The main piece here is the Track List:

<div id="track-list"
    tabindex="0"
    role="menu"
    aria-expanded="true"
    aria-activedescendant="ch1">

https://codepen.io/Motorcykey/pen/qyJrWX

Background: The idea is that we have a Chapter list of menu-items which can be hidden or shown by clicking a Button. When the list is showing, you will tab from the Chapters button into the list. Once in the list, Tab & Shift+Tab will only scroll through the menu items. Only the 'Esc' key will exit the list.

The Issue: Without JAWS running this works fine. If a user attempts to hit the 'Up/Down' keys, nothing out of the ordinary occurs.

However, once JAWS is open it was found that if the Up/Down keys were used then a colored highlight box would appear that would read other parts of the page without necessarily focusing them. Originally, this would include the hidden menu-items, but I was able to get rid of this by setting their display to 'none' (as opposed to just setting their opacity to '0').

However, you can still see in this example that if you take the following steps:

1. Tab to Chapters Button
2. Hit Space or Enter to hide the menu
3. Hit the 'Down' Key on the keyboard. The next, "Play/Pause button" should highlight and be read aloud by JAWS screen reader.
4. Meanwhile, the 'Chapters' button remains 'focused' with the default browser highlight.

My question is around this highlight box and the expected function of Up/Down keys within JAWS. What is the purpose of this highlight box as it seems decoupled from the browser focus. Is there a way to disable it? Do users typically use Up/Down keys, and if so, does this look like the expected behavior or should I be taking more into consideration to avoid confusion around these keys while working on accessibility updates?

Thank you,

-Mikey

Answer 1

an element with role="menu" must be controlled by arrow keys eg down arrow key moves focus to the next menu item and up arrow moves to the previous menu item and tab/shift+tab must moves focus to the next/previous page element. the correct implementation example: https://www.w3.org/TR/wai-aria-practices-1.1/#menubutton