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.

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.