Focus Order
Learn how focus order works and how we can determine it in the code we write.
There are two major aspects of focus that work together to create the keyboard navigation experience: focus order and focus indication. The focus order controls the order in which elements will be focused on as the user navigates through the page using their keyboard. The focus indication is the visual design that indicates which element is currently being focused on. Both of these aspects have default configurations, either from the browser or the HTML. Developers can override or reconfigure them, but we need to be careful and smart about how we do so!
How the focus order works
Ideally, the focus order reflects the importance of elements, following the visual hierarchy that the designer has established on the page. As we work our way through a page on our keyboards, the focus should follow the content: top to bottom, left to right (or right to left if the content is in an RTL language ...