How to ensure keyboard navigation

For website to be keyboard accessible it must:

have a visible keyboard focus
have a logical tab order
avoid keyboard traps

The border around the selected element is called the keyboard focus. It gives users a visual sign of what they are selecting on a webpage. It is important that the keyboard focus is visible as it allows users to know where they are on a webpage.

Red rectangle outlining the mouse focus on a link element on the Silvertone Hills good site. — Visible keyboard focus example

A logical tab order gives keyboard users the ability to understand the structure of a webpage. It must also follow the structure of the content on a webpage. This means always starting at the top of the page and going down from left to right.

A line on the Silvertone Hills good site homepage showcasing the tab order. — The logical tab order on the Silverstone Hills good site homepage.

A keyboard trap is when an element cannot be escaped using a keyboard. Elements such as calendar widgets or pop-up boxes often have keyboard traps.