[mhw]

I’m designing a piece of user interface at the moment, and one thing I’ve been puzzled by is whether keyboard shortcuts should affect the focussed element. I’d love to find out if there are best practices in this area, and particularly if there are accessibility concerns I may not spot.

As an example, consider a page that primarily contains a list of items. I set each item up to be a focus target so tabbing through the targets will select each list element in turn.

If I add keyboard shortcuts to navigate the list (e.g. up/down cursor to select previous/next element), should my JavaScript drive focus to the selected element, or should I use an independent mechanism (adding a class, say) to mark the active element? Driving focus feels like the more ‘native’ approach, but I don’t know if there are downsides to potentially taking focus away from other elements on the page (for example).

[pdenton]

I think a roving tabindex would be fine in this case. The arrow keys and tab/shift+tab change the tabindex so you always have elements with tabindex="-1" and tabindex="0".

https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_roving_tab...

[mhw]

Hey, thanks - that looks like just the document I need.