For users that predominately or exclusively use their keyboard to navigate around a web page, we must ensure that all interactive elements are reachable and focusable by keyboard only.
Keyboard only users will use their tab key to make the browser focus upon things like links, buttons and form elements. When one of these elements has focus, it will typically have a border around it to indicate it has focus like so:
The above image shows the Marks & Spencer logo, which happens to be a link, having focus after the tab key on the keyboard has been pressed. If the user was to press the tab key again, the focus would move to the next focusable element which happens to be the search input box:
When they repeatedly press the tab key they will move the focus through all the focusable elements, one by one on the page. When they reach the last item on the page and press the tab key again, they will loop back to the beginning of the page.
This is known as the tab order.
Bear in mind the browser has some tabbable elements like the address bar and favourites button amongst others. A user will have to tab through these as well.
You can press shift and tab on the keyboard and that will go through the tab order in reverse.
It is important that the tab order follows a logical order through the page from one element to the next. It also helps if this is in a linear order, visually matching the page. So after the search input field, the search button (magnifying glass icon) would get focus next, then the "Sign in" link, then all the links in the main navigation "Women, Lingerie, Men" etc.
It is not a good idea to have the tab order jump up and down and around the page as this would be disorientating and confusing for the user.
The tab order is determined by the order in which the element appears in the html.
Hidden Elements
Make sure visually hidden elements are hidden properly using the hidden attribute, or css display: none. This is because if an element is visually hidden using something like opacity: 0, then it is still able to receive keyboard focus which is confusing for a user when they have tabbed to something that has got focus, but they cannot see it.
CSS Border & Outline
Border can be used to indicate focus around an element, although border can often add to the width and height of an element, pushing other elements around on the page which can be problematic.
Outline is a less intrusive way of indicating focus around an element as it does not affect the dimensions or push other elements around.
Outline has some useful properties like outline-offset, outline-width, outline-style and outline-color to customise the outline a little further.
A lot of HTML elements get an outline by default, so its best to keep this default and not disable the css outline.
It is recommended that the focus indicator should have strong colour contrast with the colours around it so it is obvious where focus is.