How to browse the web with the keyboard alone

Some people use the keyboard to get around their computer, whether their laptop or mobile device. Knowing how to do this is important for both accessibility testing and understanding how to design and develop with keyboard-only users in mind.

The good news in that there are very few keys you need to use:

• ⇥ (Tab key)
• Space
• ⏎ (Return/Enter)
• Esc
• ↑ ↓ ← → (the up, down, left, and right arrow keys)
• ⇧ (Shift)

Note: In this article I’m going to focus on using the keyboard to get around a web page, rather than the whole operating system (which is a bit more complex and can be activated via Settings → Accessibility → Physical and Motor → Keyboard → Full keyboard access).

Page contents:

Scrolling

The assumption is that keyboard-only user can see the screen, so how would someone move up and down a web page to read the content?

Space scrolls the viewport down by about a viewport’s height at a time until it reaches the bottom, and ⇧ + Space scrolls it back up; again by a viewport’s height until it reaches the top.

In some browsers the ↓ will nudge the page down slightly, and ↑ will nudge it up again.

You can also jump to the bottom of the page with ⌘ (Command) + ↓ on macOS and the End key on Windows. The opposite is also true: you can scroll back to the top of the page with ⌘ + ↑ on macOS and Home on Windows.

The tab key

As a keyboard-only user the tab key is your friend. It moves focus from one interactive element to another:

• Links
• Buttons
• Form fields
• Other interactive components, such as accessible tables

⇧ + ⇥ moves backwards to the previous interactive element.

Note: by default Safari on macOS only tabs to form fields; you have to activate tabbing to all interactive components.

Once you reach the last interactive element in a web page, pressing ⇥ will circle your focus back to the top of the browser. ⇧ + ⇥ from the first interactive item on a page brings focus to the items in the browser’s chrome (tabs, bookmarks, address bar, etc.).

Following links and pressing buttons

When you are focused on a link, pressing ⏎ follows it; the same with a button.

The Space key can also be used to press a button, although this isn’t the case with links. Pressing space when focus is on a link scrolls the page down rather than following the link.

Interacting with forms

Things get a wee bit more complicated when filling a form in.

Text-based form fields like text <input>s and <textarea>s are pretty straightforward: tab onto the field, type a value, then tab onto the next field.

Checkboxes are even simpler: check/de-check using the Space key.

Radio buttons

Checkboxes can exist individually or as a group (a <fieldset>), but the keyboard behaviour doesn’t change one way or the other. Radios only make sense as a group of two or more and behave differently to a group of checkboxes. Instead of being independent controls (in other words, tab to a checkbox, check it if appropriate, tab to the next, and so on) radio buttons work as a unified whole; here’s how they work:

• Tab onto the radio group; this highlights the first radio item but doesn’t select it
• Press Space to select that first highlighted-but-not-selected radio button
• Press ↓ or → to move to and select the next radio button
• Press ↑ or ← to move to and select the previous radio button
• ⇥ takes you out of the radio group and onto the next interactive element on the page

Tabbing backwards onto a radio group where no items have been selected highlights the last item (without selecting it); tabbing or ⇧-tabbing onto a radio group when an item has already been selected places focus on that item.

Select dropdowns

<select>s behave differently on macOS and Windows. Once you’ve tabbed onto the parent ‘button’, open the menu by pressing Space or ⏎ and close it with Esc. Beyond that, things get interesting:

macOS

On macOS you can also use ↑ or ↓ to open the menu. If an option hasn’t already been selected, no items will have focus. ↓ as the first press puts focus on the first option, and ↑ as the first press puts focus on the last option.

Further presses of the ↑ or ↓ keys move focus up or down the options until you hit the last, or come back up to the first, option, at which point it will stop.

Moving from option to option only highlights that option, it doesn’t select it. To select the option you must press Space or ⏎, at which point the menu closes and the value of the parent button changes to the selected option.

If you re-open the menu the selected option will be focused and selected (shown with a tick).

Windows

On Windows, focusing/highlighting an option also selects it. Space and ⏎, therefore, only open/close the menu, since selection is not a separate action. Esc closes the menu when it’s open.

Selecting an option can be done with the menu open or closed. When the button has focus or when the menu is open, any of the arrow keys to change an option:

• ↓ and → move to the next option until you hit the last one, at which point it’ll stop
• ↑ and ← move to the previous option until you hit the first one, where it’ll stop

Re-opening the menu focuses on the selected option (there’s no tick; just the focus indicator together with the value of the focused/selected item in the button).

And a new way

The styling limitations of <select> have recently been overcome, and, with them, the behavioural inconsistencies have also been addressed. With appearance: base-select the keyboard navigation has been brought in line.

First, the menu must be open before an option can be selected. When focus is on the button, ↑, ↓, Space, or ⏎ open the menu, and no items are focused.

• ← and → do nothing
• ↓ as the first press puts focus on the first option
• ↑ as the first press does nothing
• ↓ moves focus down, stopping on the last option
• ↑ moves focus up, stopping on the first option

Moving from option to option only highlights that option, it doesn’t select it; Space or ⏎ do that job, and once pressed the menu closes and the selected option is shown in the button.

Re-opening the menu places focus on the selected option and shows a tick next to it.

Moving around items in a group

You’ll encounter other ‘groups’ of things, for example:

• tabs in a tab panel
• buttons in a button toggle
• menu items in a menubar

None of these patterns are native HTML so there’s no ‘default’ behaviour to refer to. There is some commonality though: like a radio group, the group of tabs/buttons/menu items should be a single tab stop, and the arrow keys are the mechanism to move focus from one tab/button/menu item to the next. Each item is essentially a button, so the expected keyboard behaviour would be that each button is pressed in the normal way (⏎ or Space).