Cacher is the code snippet organizer for pro developers

Tab Order

1. Custom interactive controls should aim to be focusable. If you use JavaScript to turn a
   into a fancy dropdown, it will not automatically be inserted into the tab order. To make a custom control focusable, give it a tabindex=”0”
2. Avoid controls with a tabindex > 0. These controls will jump ahead of everything else in the tab order, regardless of their position in the DOM. This can be confusing for screen reader users as they tend to navigate the DOM in a linear fashion.

aria-hidden does not prevent keyboard focus

While you can make an element hidden to screen readers with aria-hidden=”true”, that does not change the focus behavior for that element.

For offscreen interactive content, you will often need to combine aria-hidden=”true” and tabindex=”-1” to make sure it’s truly removed from the keyboard flow. The proposed inert attribute aims to make this easier by combining the behavior of both attributes.