Keyboard accessibility is key when making the Web accessible. Keyboard is the main tool for operating a computer for screen reader users, users that can't use mouse for some reason, and users that just prefer navigating with a keyboard. That's a significant number of people.

If you have never used your keyboard to navigate a website, try starting by pressing Tab key (Shift + Tab to go back). This key let's you skip from one "focusable" element to another. Focusable elements are those that can receive focus.

Some semantic HTML interactive elements are focusable out of the box. We are talking about <button>, <a>, <input>, <select>, etc. We should aim to use these as much as possible. Their behavior is exactly what we need to support keyboard accessibility while trying to replicate the same functionality with attributes or JavaScript may be tricky.

The fact that our elements are focusable is just the first part of the journey though. If you can't see where your focus is, navigating is almost impossible. It is crucial that the focus state is visible to the user. Browsers usually have a distinct outline built in to show focused elements. We should not remove the outline for our whole project by outline: none. This makes the site inaccessible. If we want to change the style of the outline so it looks pretty with our designs, that's easy enough to do with CSS. Also, when adding styling for hover state, consider adding the same style for focused state (:hover, :focus). It will make the behavior similar for keyboard and mouse users.

The order of focusable elements on the page should be logical - top to bottom, left to right. If we need to change the order of focusable elements, it can be done by using the tabindex attribute. tabindex=0 means the element is focusable in sequential keyboard navigation, negative tabindex means that the element is not reachable by keyboard navigation, and a positive tabindex gives the element priority. The safest bet when developing is using tabindex=0. Note that interactive elements don't need to have this attribute added as it's built-in them by default.

Keyboard accessibility goes a long way in making your site accessible. It is one of the first things we need to focus on when optimizing our project for accessibility, or we need to think about it from the start when starting a new project.