惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Cloudbric
Cloudbric
T
Threat Research - Cisco Blogs
Simon Willison's Weblog
Simon Willison's Weblog
AWS News Blog
AWS News Blog
P
Privacy & Cybersecurity Law Blog
H
Help Net Security
云风的 BLOG
云风的 BLOG
G
GRAHAM CLULEY
Spread Privacy
Spread Privacy
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
A
Arctic Wolf
Project Zero
Project Zero
Engineering at Meta
Engineering at Meta
P
Privacy International News Feed
Blog — PlanetScale
Blog — PlanetScale
Stack Overflow Blog
Stack Overflow Blog
M
MIT News - Artificial intelligence
The Register - Security
The Register - Security
Recorded Future
Recorded Future
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
C
Cisco Blogs
PCI Perspectives
PCI Perspectives
Recent Announcements
Recent Announcements
Martin Fowler
Martin Fowler
A
About on SuperTechFans
W
WeLiveSecurity
GbyAI
GbyAI
V
Vulnerabilities – Threatpost
The GitHub Blog
The GitHub Blog
D
Darknet – Hacking Tools, Hacker News & Cyber Security
C
Check Point Blog
Y
Y Combinator Blog
月光博客
月光博客
Scott Helme
Scott Helme
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Google DeepMind News
Google DeepMind News
F
Fortinet All Blogs
U
Unit 42
G
Google Developers Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
T
Threatpost
Application and Cybersecurity Blog
Application and Cybersecurity Blog
Google Online Security Blog
Google Online Security Blog
Recent Commits to openclaw:main
Recent Commits to openclaw:main
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Cisco Talos Blog
Cisco Talos Blog
博客园 - 三生石上(FineUI控件)
Hugging Face - Blog
Hugging Face - Blog
MongoDB | Blog
MongoDB | Blog
博客园 - 司徒正美

TetraLogical Blog

Designing for people with reading disabilities - TetraLogical Designing for people who are D/deaf - TetraLogical Designing accessible documents - TetraLogical Introduction to creating accessible documents - TetraLogical Inclusive user research: vulnerable people - TetraLogical Designing for people who are blind - TetraLogical Designing for people with low vision - TetraLogical Meet the team: Niamh Madden - TetraLogical Designing for people with anxiety - TetraLogical Designing for people with disabilities - TetraLogical Accessible building blocks for the web videos - TetraLogical Common accessibility misconceptions - TetraLogical Common misconceptions about testing accessibility - TetraLogical Common misconceptions about implementing accessibility - TetraLogical Common misconceptions about WCAG - TetraLogical Common misconceptions about disability - TetraLogical Meet the team: Grace Snow - TetraLogical Sustainable accessibility in complex organisations: strategic foundations - TetraLogical Sustainable accessibility in complex organisations: organisational realities - TetraLogical Sustainable accessibility in complex organisations: external factors - TetraLogical Common misconceptions about screen readers - TetraLogical Guide to the Inclusive Design Principles - TetraLogical Meet the team: Ian Lloyd - TetraLogical Annotating designs using common language - TetraLogical Meet the team: Catriona Morrison - TetraLogical Championing inclusive language - TetraLogical Press release: TetraLogical launches accessible self-led training courses to help digital teams build confidence in accessibility - TetraLogical Why inclusive products are green products - TetraLogical Accessible Recruitment - TetraLogical Accessibility and the agentic web - TetraLogical Meet the team: Craig Abbott - TetraLogical Foundations: types of assistive technology and adaptive strategies - TetraLogical European Accessibility Act (EAA) FAQ - TetraLogical Screen reader HTML support tables - TetraLogical Interview with Lola Odelola - TetraLogical Understanding EN 17161 Design for All - TetraLogical Inclusive user research: building rapport - TetraLogical Foundations: Keyboard accessibility - TetraLogical Can generative AI write contextual text descriptions? - TetraLogical Understanding the European Accessibility Act (EAA) - TetraLogical Meet Josh: a sportsman who has spinal muscular atrophy - TetraLogical Meet Jonathan: a photographer who has ADHD - TetraLogical Foundations: grouping forms with `<fieldset>` and `<legend>` - TetraLogical XR Accessibility: for people with moving disabilities - TetraLogical Meet Andre: a music producer and blind screen reader user - TetraLogical Foundations: types of disability - TetraLogical Meet Lauren: a film editor who has ADHD - TetraLogical Meet Steve: a photographer who is deaf and low vision - TetraLogical Foundations: form validation and error messages - TetraLogical Meet Hasmukh: a blind cricketer and screen reader user - TetraLogical XR Accessibility: for people with hearing disabilities - TetraLogical XR Accessibility: for people with thinking disabilities - TetraLogical XR Accessibility: for people with seeing disabilities - TetraLogical Introduction to XR Accessibility - TetraLogical Foundations: labelling text fields with input and label - TetraLogical Design patterns and WCAG - TetraLogical Does WCAG 2.2 apply to native apps - TetraLogical Why are my live regions not working? - TetraLogical Building a culture of accessibility - TetraLogical When to use tabindex= Accessibility foundations - TetraLogical Meet the team: Demelza Feltham - TetraLogical Can generative AI help write accessible code? - TetraLogical Meet the team: Steve Faulkner - TetraLogical Meet the team: Gez Lemon - TetraLogical Keyboard accessibility myths and WCAG - TetraLogical Amendment to the Public Sector Accessibility Regulations - TetraLogical What Considerations for TV user interface accessibility - TetraLogical Meet the team: Alistair Duggin - TetraLogical Sticky content: focus in view - TetraLogical The only accessibility specialist in the room - TetraLogical Meet the team: Ian Pouncey - TetraLogical Meet the team: Dean Holden - TetraLogical Meeting WCAG Level AAA - TetraLogical Foundations: accessible names and descriptions - TetraLogical Inclusive XR: accessible augmented reality experiences - TetraLogical Foundations: pointer gestures - TetraLogical Meet the team: Graeme Coleman - TetraLogical Adding sign language to videos - TetraLogical Foundations: introduction to WAI-ARIA - TetraLogical Meet the team: Joe Lamyman - TetraLogical Inclusive XR: accessible 3D experiences - TetraLogical Foundations: visible focus styles - TetraLogical Foundations: target sizes - TetraLogical Meet the team: Henny Swan - TetraLogical Meet the team: Ela Gorla - TetraLogical Foundations: native versus custom components - TetraLogical Foundations: HTML semantics - TetraLogical Accessibility and supporting Internet Explorer - TetraLogical Meet the team: Felicity Miners-Jones - TetraLogical Accessibility and QR codes - TetraLogical Inclusive user research: recruiting participants - TetraLogical Research insight: accessibility of images - TetraLogical Meet the team: Léonie Watson - TetraLogical Android accessibility: roles and TalkBack - TetraLogical Accessible design systems - TetraLogical Meet the team: Patrick H. Lauke - TetraLogical Inclusive user research: analysing findings - TetraLogical How to write user stories for accessibility - TetraLogical
Browsing with a keyboard - TetraLogical
2021-10-26 · via TetraLogical Blog

Posted on by Henny Swan in User experience

Tags: Assistive Technology

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.

A black and white photo of Bev, a white woman in her 50s with blond hair scooped back in a hairband. She is sitting in front of a canvas laughing while she paints with her right hand and holds the canvas and some paint brushes in her prosthetic hand and arm
Bev, an artist with a prosthetic arm, "Accessibility means being able to do things on my own terms, and in my own time".

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.

A woman using a split 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:

  • Tab to navigate to the next focusable element
  • Shift + Tab to move to the previous focusable element
  • Enter to activate links
  • Enter or Space keys 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).

  • Video
  • British Sign Language Video

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".

The macOS Keyboard Shortcuts settings showing "Use keyboard navigation to move focus between controls" selected

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.

A man in a wheelchair at his desk, holding a pointing device with his mouth and using the keyboard on his laptop (Credit: WAI Perspectives: Keyboard compatibility)

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.

The skip link on the TetraLogical homepage which becomes visible on focus

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 Consultancy service can help you achieve sustainable accessibility.

Updated Thursday 2 March 2023.