WebAIM - Web Accessibility In Mind

E-mail List Archives

Keyboard navigation within list items.

for

From: Frederik Creemers
Date: Apr 14, 2023 6:39PM

Hi.

I'm implementing a generic keyboard-navigable list component. Currently,
it's implemented such that at any point in time, only one element in the
list is focusable. When this element is focused, the user can use the up
and down arrow keys to move focus to the previous or next item.

There might be focuseable elements within a list item, so the way I've made
that work, is that they're only focuseable when the current list item is
focuseable, so once an item has focus, the user can press tab to navigate
through the items within it. I based this design on the way Slack's message
list works.

But now I've been playing with WhatsApp's web UI, and it works slightly
differently. Once a list has focus you can use the left and right arrow
keys to focus things within the list item. Pressing tab moves focus away
from the list. I personally find this slightly confusing for things like
links in messages.

Are there any recommendations for how a web application should deal with
this? is there any publicly available user research information on this?

Best regards,
Frederik Creemers.