At a given moment, focus refers to what element in your application (such as a field, checkbox, button, or link) currently receives input from the keyboard. In addition to receiving keyboard events, the focused element also gets content that is pasted from the clipboard.
To move the focus on a page, use TAB to navigate "forward" and SHIFT + TAB to navigate "backward." The currently focused element is often indicated by a focus ring, and various browsers style their focus rings differently. The order in which focus proceeds forward and backward through interactive elements is called the tab order.
Interactive HTML elements like text fields, buttons, and select lists are implicitly focusable: they are automatically inserted into the tab order based on their position in the DOM. These interactive elements also have built-in keyboard event handling.
Elements such as paragraphs and divs are not implicitly focusable because users typically do not need to interact with them.
Implementing a logical tab order is an important part of providing your users with a smooth keyboard navigation experience. There are two main ideas to keep in mind when assessing and adjusting your tab order:
Arrange elements in the DOM to be in logical order.
Correctly set the visibility of offscreen content that should not receive focus.