What's 'roving tabindex'?
- Published at
- Updated at
- Reading time
Focus handling is essential for accessible and well-functioning interfaces. When building complex interfaces with custom UI components or custom elements, you should check if folks can interact with the components only with the keyboard.
tabindex HTML element attribute plays a significant role when you implement custom focus handling.
Let's check what attribute values you can define:
<!-- tabindex="0" -> element should be focusable in sequential keyboard navigation --> <component-a tabindex="0">Foo</component-a> <!-- tabindex="-1" -> element should be focusable, but should not be reachable via sequential keyboard navigation --> <component-b tabindex="-1">Bar</component-b>
tabindex attribute, you can control if custom elements can be focusable and if they should be reachable with keyboard navigation. This is useful when you want to lead the focus to elements when users are "tabbing around".
So, what's a "roving
"Roving tabindex" is a technique to maintain a component's focus state. Think of a group of custom radio elements; what should be the behavior when you "tab" into this group? I'm expecting the following:
- tab into 👉🏻 the active radio gets focus - left/right arrow 👉🏻 another radio element get focus - another tab 👉🏻 focus goes out of the radio group - tab back in 👉🏻 the last active radio get focus
This behavior can not be achieved when all elements are focusable and follow the natural focus order.
tabindex=-1 can help out here. Set
tabindex="0" on the selected radio, so that it receives focus when the user tabs into the component. Define
tabindex="-1" on all the other elements, so that they are still focusable programmatically but are not reachable by the keyboard.
<radio-group> <custom-radio tabindex="-1">1</custom-radio> <custom-radio tabindex="-1">2</custom-radio> <custom-radio tabindex="0">3</custom-radio> <custom-radio tabindex="-1">4</custom-radio> <custom-radio tabindex="-1">5</custom-radio> </radio-group>
And that's it for today, happy tabbing! ;)
- Chrome and Edge provide a highly visible focus outlines
- Input-wrapping labels are not supported by Dragon
- How to visualize the tab order without using an extension in Firefox
- How to define Open Graph / Twitter image alt text (and why it might not matter...)
- How to read an entire document using VoiceOver