How do I change the order the elements on my page are given focus?
Question
When I tab through the elements on my site with the keyboard everything is almost perfect except for a couple case where it looks like the order is messed up. How can I change the order the elements on my page are given focus when I tag through everything?
Answer
Tab focus order will follow the DOM order of elements by default. If your issue is solely related to elements being out of order, you should reorder the DOM so the elements are in the correct order.
Another related tactic is to use the tabindex attribute. A tabindex of -1 (tabindex="-1") will remove an element from the tab order. A tabindex of 0 (tabindex="0") will add an element to the focus order.
It is highly recommended to avoid positive tabindex values and to structure your DOM in the correct order.