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

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.