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 RAMP
Monitor your website and manage your progress towards WCAG conformance.
Accessible Web Academy
Career specific courses to help power up your accessibility knowledge.