How do I navigate a website with my keyboard?

Question

I've been reading about how I need to make sure my site can be navigated with a keyboard. Honestly, I'm not even sure where to start because I don't know what button I would hit on my keyboard. How do I navigate a website with my keyboard?

Answer

To navigate a website with the keyboard, you can start by hitting the tab key. You should see an indicator on the element that has focus.

Here are some keyboard navigation basics:

  • Tab - move to next interactive element
  • Shift + Tab - move to previous interactive element
  • Return/Enter - activate elements (links, buttons, etc)
  • Spacebar - activates buttons (such as to pause/play videos, submit forms, etc)
  • Esc - close opened content (modals, navigation menus, etc) or cancel current action
  • Arrows - navigate within widgets (tablists, checkboxes within a disclosure button, etc) and navigate around a page