Google maps remove UI from tab order

Question

In my application I have dialog that opens google maps. When navigating google maps with tab the UI at the bottom of the map is "tabable". How can I remove this using javascript? I have tried using query selector with setattribute tabindex = "-1" without success

Google maps

Answer 1

You could potentially be creating an accessibility issue. You'll have "clickable" elements at the bottom of the map that mouse users can access but keyboard users can't.

tabindex="-1" should do the trick. It's always worked for me. Do you have a working example we can debug?

To have the same experience for all users, rather than using tabindex, which would create a disparate experience for mouse and keyboard users, you can try the inert attribute. (There is not a disabled attribute for links, <a>, like there is for form elements.) You'd have to test it in several browsers (mobile too) to see how well it's supported.

You could also remove the href attribute from the links. A link without an href is called a placeholder link and is not keyboard focusable.

But perhaps the best solution would be to remove those elements completely. If you don't want to allow users to tab to them, then you shouldn't let users click on them either. If the elements are inert or static, what's the point of keeping the elements at all? It sounds like you're getting the elements with querySelector() so once you have the element, x, just call x.remove().