How can I change the order of natural tabs in only part of an html document?
I have a form in the middle of my page and I want to reorder the tabs on that form, but not disrupt the rest of the document tab flow. I basically have two buttons that I would like to reorder the tabs. I've tried tabindex 0, -1 as well as several others. Setting them breaks the natural order when it inserts them into links before menu links, etc ... I've seen some examples where tabindex is added to each tabbable and then their values are set via javascript. I was hoping to avoid something like this. Also moving the buttons is not an option. The html is built to be responsive, and they want buttons to line up a certain way on mobile. What's the correct way to achieve this?
source to share
There is only one tab order for the document, so if you set tabindex
only two elements, you will inevitably affect the order in general: then those elements will be in order before any elements that do not have this attribute. To make them appear in their natural place, you need to set tabindex
for all elements in front of them.
As a workaround, you might consider inserting the form via iframe
. The attached document has its own tab order.
Alternatively, as @DerekKurth suggests in a comment, make the original element order the desired tab order and format the visual order with CSS.
Best of all, don't create a problem. It is always a deviation from good usability and accessibility if the tab order differs from the apparent order.
source to share