0

The "handleAccordionKeyDown" function enables arrow key navigation in an accordion. If the first accordion element, a link, is focused with the tab key, arrow key navigation is activated. When the last link of the accordion is reached, arrow key navigation is automatically replaced by the standard behavior of the arrow keys when navigation is continued, that is: scrolling a page. Users can navigate through the accordion using both the tab key and the arrow keys. In both navigation variants, the focus ring is set correctly. This works well when NVDA is not active. If NVDA is active, navigation still works well but the focus ring is only set/displayed when navigating with the tab key. If I navigate with the arrow keys, the focus ring is not set/displayed. This is because NVDA blocks the EventListeners in my JavaScript that listen to arrow keys events and overrides it with its own behavior. This behavior of NVDA leads to an inconsistent user experience. On the one hand, navigation using the tab key is visually supported with the display of a focus ring. On the other hand, navigation using the arrow keys is not visually supported because the focus ring is not set/displayed. NVDA's own behavior supports navigation using arrow keys within an accordion. It is therefore all the more incomprehensible why this navigation is not supported visually by setting/displaying the focus ring for focused links.

        const dtLinks = Array.from(document.querySelectorAll('dt.desc-term a'));
        const currentIndex = dtLinks.indexOf(event.target);

        switch (event.keyCode) {
            case 32: // Leertaste
                handleAccordion(event);
                break;
            case 40: // Pfeil nach unten
                if (currentIndex < dtLinks.length - 1) {
                    event.preventDefault();
                    dtLinks[currentIndex + 1].focus();
                }
                break;
            case 38: // Pfeil nach oben
                if (currentIndex > 0) {
                    event.preventDefault();
                    dtLinks[currentIndex - 1].focus();
                }
                break;
        }
    }

I have tried to set the ARIA attribute 'aria-label=“focused”' via JavaScript. But this only works if NVDA is not active. As soon as NVDA is active, eventListeners that listen to arrow keys events are deactivated. This also prevents the ARIA attribute from being set. - I expect the following behavior when NVDA is active: When I navigate with the arrow keys 38 and 40, a focus ring should be displayed around the focused accordion element. Is there a solution to this issue?

2
  • What does aria-label=focused do for you without NVDA running?
    – Andy
    Commented Jun 6 at 15:26
  • Could you please complete the code sample? It’s unclear which element’s events you are binding to, and if you were using an interactive code sample, we could reproduce the issue.
    – Andy
    Commented Jun 7 at 7:11

0