I make games. I often have the requirement to quickly build a dialog or a window of some kind. Using native HTMl here makes sense to me, so I'm implementing a bunch of components that implement the most common features I need in my UI.
Now they have to be accessible, so read well with screen readers, and be fully keyboard navigable. This includes things like lists, tab bars, menus, etc.
So here's the problem. I have some things that need to be inside a container. A list for example. So you have the list container, and then the list items inside it.
When you tab around, I want the container to be tabbable, not the list item. So you don't tab through the list, you tab to the list, and then use the arrows to move around.
Now here's the problem. When the container is tabbable, and not the list item, when you tab to the container, it either:
* reads something like "List title section" and then nothing, not even the item you have selected. Or
* Reads all the list items at once.
Either of those are not great obviously. Ideally, I'd like it to read the list title, then list, and then the selected item.
So the way I get it to do this is by detecting when you tab/focus the list container, and then immediately set the focus to the selected list item instead.
Now this works fantastic. You can tab around, and it automatically puts you right on the list item you have selected, and it even gets read.
But somehow, when you don't just tab around, but also shift tab around, this shift tab lands you back on the list container. And that automatically moves your focus back inside the list. So effectively, once you're in a list, you're trapped.
Does anyone have an idea how to get around this without doing ugly hacks like stealing tab and shift tab and implementing tab order myself? I want to use as many native browser features as possible so if there's another way to do this, please feel free to tell me.
#HTML #JavaScript #accessibility