Browsing with a keyboard
In our third post from our browsing with assistive technology series, we discuss browsing with a keyboard.
You can also explore browsing with a desktop screen reader, browsing with a mobile screen reader, browsing with screen magnification and browsing with speech recognition.
Keyboards can be plugged in, built-in or attached wirelessly to desktop computers, laptops and mobile devices. They enable access to the entire operating system and applications, including browsers and web content, for people who do not use a mouse.
Who uses a keyboard
Most people will use a keyboard. However, people who have limited or no use of a mouse or touch may rely on a keyboard to interact with their device.
People with permanent disabilities that affect arm movement or dexterity will use a keyboard. This includes people with Cerebral Palsy, people who are paraplegic or quadriplegic, have arthritis or Parkinson's disease.
Keyboards are also used by people with temporary limitations such as Repetitive Strain Injury (RSI), fractured or broken wrists, or damaged tendons. People with situational limitations may also use a keyboard; for example, if their mouse is broken.
Ergonomic keyboards
Unlike standard keyboards, ergonomic keyboards come in all sorts of shapes and sizes and are designed to fit you, rather than you having to fit the keyboard.
The shape and fit of an ergonomic keyboard is designed to remove the strain you might experience on your hands when using a standard keyboard. They can have concave or tapered keys, well-spaced keys, or split keypads for the left hand and right hand.
Ergonomic keyboards are used by people with permanent disabilities such as Cerebral Palsy or limited dexterity and are popular with people with temporary disabilities such as RSI.
Navigating with a keyboard
Navigating with a keyboard is very different from navigating with a mouse. When you use a mouse, you choose where to point it, follow the visible cursor until you get where you want, then interact with the content.
When you use a keyboard, your actions are constrained by the order in which content is coded. Unlike with a mouse, you cannot choose where your focus goes. You can only navigate sequentially through focusable page elements including links, buttons and form inputs. You cannot jump between headings, lists, links, or form inputs the same way mouse users or people who use a screen reader can. Read browsing with a desktop screen reader and browsing with a mobile screen reader to find out more.
Common keyboard commands when navigating with a keyboard are:
Tabto navigate to the next focusable elementShift+Tabto move to the previous focusable elementEnterto activate linksEnterorSpacekeys to activate buttons- Arrow keys to navigate components such as menus, sliders, and tab panels.
When navigating web pages, visible focus changes help you track where you are. People also expect the reading order to flow from top to bottom and left to right. If the focus is not visible or logical, you can quickly become lost on a page. Try using the Tab key to tab around this page, you'll notice that links that receive focus change visibly, so you know where you are.
It can also be very frustrating when there are buttons, links or form inputs that cannot be reached or cannot be activated by the keyboard.
Unless focus is on a button, the Space key scrolls more content into view. The Page Up and Page Down keys can also be used to do this. It's important to remember that these keys only bring more content into view. They do not move keyboard focus (which remains on the last focusable element to be navigated to using the Tab or Shift + Tab keys).
Transcript
[The TetraLogical logo whooshes into view on a white background. The logo flashes and stops with a sonar-like 'ping'. It then magnifies and fades out.]
[A dark purple background appears with the TetraLogical logo faintly overlaid]
Browsing with a keyboard
Navigating a web page or web application with a keyboard is very different from navigating with a mouse.
[The TetraLogical homepage appears with a horizontal list of links for main navigation at the top, a heading, and the body of the page content below. The cursor moves around the screen]
When you use a mouse, you choose where to point it, follow the visible mouse cursor until you get where you want, then interact with the content.
[The cursor selects the "News" link from the main navigation and the News page opens]
When you use a keyboard, your actions are constrained by the order in which content is coded, rather than its visual presentation and layout.
Unlike with a mouse, you're more limited in how you can move your focus.
[The TetraLogical homepage fades back into view]
Keyboard focus moves sequentially through focusable elements such as links, buttons, controls, and form inputs.
[A purple button with the text "Skip to main content" appears at the top of the screen. As the user navigates through the main menu using the tab key, the word "tab" on appears at the bottom of the screen]
By default, the Tab key is used to navigate to the next focusable element and Shift+Tab is used to move to the previous focusable element.
[The screen changes to reveal the Mac System Preferences displaying a series of icons]
In contrast with other operating systems, note that by default, on macOS, Tab only moves between text input fields and a limited set of controls.
[The mouse moves over the screen and selects the options as they're read aloud]
Generally, people that rely on the keyboard to navigate will go to macOS' System Preferences > Keyboard > Shortcuts and enable the "Use keyboard navigation to move focus between controls" option.
[The TetraLogical homepage reappears]
You can generally scroll through content using the cursor keys.
[As the user navigates down the page, the word "space" on appears at the bottom of the screen]
You can also use Space to scroll one screen at a time, and Shift+Space to scroll backwards.
The same can be achieved using the PageUp and PageDown keys.
It's important to remember that these keys only bring more content into view. In order to interact with content, people using a keyboard rely instead on moving the specific keyboard focus.
[The TetraLogical homepage reappears along with the word "tab" at the bottom of the screen. The visible focus outline jumps to each new element as the user navigates through the page]
Once focus is on a control, there are different keys that can be used to interact with the focused element.
[The word "Enter" appears on the screen as the "News" page is selected and opens]
Enter is used to activate links.
[A new webpage appears with the heading "Checkbox". Two checkbox items appear above a purple "submit" button. The word "tab" appears at the bottom of the screen]
Checkboxes and switches are toggled using Space.
[As the user presses space the word on screen changes from "Tab" to "Space". "Tab" causes the visible focus to move to the first checkbox. "Space" then selects the box so a small tick appears inside. This is repeated for the second checkbox item
[A new screen appears with the heading "Select" above a "Select dropdown" menu. The dropdown says "Choose an option" next to a downwards-facing arrow]
Select dropdowns are opened using Enter or Alt+Down arrow.
[The text "Alt+" and a downwards arrow appears in screen. This expands the dropdown menu so options one, two, three, and four are displayed. The user navigates down the list as the downwards arrow is displayed on screen]
The selected option can then be chosen using the arrow keys.
[The user presses "Enter" and the word "Enter is displayed on screen. The dropdown menu closes]
Tab, Enter, or Esc close the dropdown again.
[The screen changes with the heading "Radio buttons" above the same options, this time displayed as four separate radio buttons. The visible focus is on the first option which has been checked]
In some situations, complex or compound controls only present the user with a single tab stop.
Once they have focus, the arrow keys are used to move between the different controls.
As an example, here is a group of radio buttons. Only the currently checked control receives focus.
[The user navigates through the options using the right arrow key which is displayed on screen as it is pressed. They then navigate back the opposite way through the options]
Once it has focus, arrow keys are used to change the currently selected radio button.
Buttons can be activated using Space or Enter.
[A new screen appears with "Confirmation" as the heading. Below is text saying confirming a form has been submitted]
These are some of the high-level details about keyboard navigation, and common strategies that people browsing with a keyboard use.
[The screen fades to white and the TetraLogical logo appears again]
To find out more about accessibility visit tetralogical.com.
macOS and a keyboard
Unlike Windows, keyboard support needs to be enabled on macOS. If it is not enabled you can only TAB into the form inputs and not the links, buttons and controls. To do this go to Apple menu > Settings > Keyboard > Shortcuts and select "Use keyboard navigation to move focus between controls".
Using keyboards with other input devices
People often use a keyboard in combination with another input device. This is quite common as keyboard navigation on its own is limited. Alternative devices can range from voice input, pointing devices and switches to even a mouse for people with limited use of a mouse.
What devices people use, and when, will vary depending on what tasks they are doing. For example, someone with Cerebral Palsy or RSI might prefer to use speech recognition to enter text like a search term, then use the keyboard to navigate the search results.
Some people may not be able to use their hands with a keyboard and instead use a pointing device attached to their head or in their mouth to tap the keys.
(Credit: WAI Perspectives: Keyboard compatibility)
Skip links
Skip links provide a way for keyboard users to bypass repeated web content, including main navigation and search, and move directly to the main content area.
Given how limited keyboard navigation is and how it forces sequential navigation, skip links can be very important for sighted keyboard users, more so than screen reader users who have many other keyboard shortcuts available to them. Try using the Tab key now to tab to the top of the TetraLogical page where a skip link becomes visible on keyboard focus
Summary
People use keyboards because they have limited or no use of the mouse.
Ergonomic keyboards come in all sorts of shapes and sizes to fit what people need.
Keyboard navigation is limited, so it is common for people to use a keyboard combined with another form of input.
Keyboard navigation is sequential, moving through content in the order it appears in the source code of the page. In western cultures, people expect the content order to go from top to bottom, left to right and to be able to track visible focus.
Shortcuts like skip links are useful for keyboard users as they help bypass repeated content across pages.
Next steps
Read an inclusive approach to video production to learn more about how to produce accessible videos and how our embedded accessibility service can help you achieve sustainable accessibility.
Updated Thursday 2 March 2023.