Keyboard Access & Other Alternative Inputs

Many people use keyboard shortcuts to do things on the computer. Some people can only use a keyboard (or alternative keyboard) to interact with the computer.

One of the key concepts in web accessibility is to make sure that your web page can be operated by someone who accesses the computer with just a keyboard. This includes being able to move logically through the reading order of the content, as well as moving logically to all the navigation buttons and other interactive items on the page.

See the Web Accessibility page and the Accessibility Checklists, Evaluation Tools and Techniques page on this site.

Also see the AT (Adaptive/Assistive Technology) page to learn more about special devices, equipment and other items some users use to access technology.

Getting Started

    • Skip to Main Content Link for Keyboard Users [NCSU] (YouTube 2:05, Oct 2015) https://www.youtube.com/watch?v=Qjn0dymxuJk

    • "This demonstrates the problem a keyboard-only user encounters when trying to navigate Websites that do not provide a convenient way to skip repetitive navigation."

    • Keyboard and Mouse: Alternatives and Adaptations for Disabled People https://www.abilitynet.org.uk/factsheet/keyboard-and-mouse-adaptations

    • Keyboard Aids (non-tech) http://atto.buffalo.edu/registered/ATBasics/AdaptingComputers/SimpleModifications/keyboard.php

    • Mouse Options http://atto.buffalo.edu/registered/ATBasics/AdaptingComputers/MouseOptions/printmodule.php

    • (Eye-tracking feature - Windows) For People Who Can’t Use Their Hands, Windows’ New Eye-Tracking Feature Is a Game Changer http://www.slate.com/blogs/future_tense/2017/08/02/windows_new_eye_tracking_may_help_thousands_with_als.html

Keyboard Shortcuts

  • Microsoft Accessibility: Keyboard Shortcuts https://www.microsoft.com/enable/products/keyboard.aspx

  • Mac keyboard shortcuts for accessibility features https://support.apple.com/en-us/HT204434

  • Using the Tab and Space Keys to Navigate a Website (YouTube 1:11)https://www.youtube.com/watch?v=a4VqFLgVVbE

Designing for Keyboard Accessibility

"Usability best practice is to gather feedback and insights through observed usability evaluations. However, testing keyboard usability is one thing you can do yourself.

Spend a few minutes using the TAB key to move through all active controls in an interface (SHIFT + TAB reverses tab focus order). For each control, check that it receives focus and there’s a visible indication of focus, that it receives focus in a logical sequence, and that it can be operated using standard keyboard commands. When a combo box menu has focus, for example, using the arrow keys should enable navigation through each option in the menu."

(from https://www.usertesting.com/blog/2014/10/08/designing-better-keyboard-experiences/)

Quick Links: Designing for Keyboard Accessibility

  • Keyboard Accessibility [WebAIM] http://webaim.org/techniques/keyboard/

  • Designing for Keyboard Accessibility [University of Washington] http://www.washington.edu/accessibility/checklist/keyboard/

  • * Keyboard-Only Navigation for Improved Accessibility https://www.nngroup.com/articles/keyboard-accessibility/

  • Designing Better Keyboard Experiences https://www.usertesting.com/blog/2014/10/08/designing-better-keyboard-experiences/

Focus Control - the Visual Clues

People who cannot use a mouse frequently use their keyboard to navigate through a web page to identify the active elements (buttons, links, form fields/controls, etc). Users expect the Tab, Shift+Tab, Enter, arrow keys, spacebar, etc to act in a certain way, and assistive technology (AT) devices are built using this principle.

Web pages must be designed to move through the active elements in a logical order, and each active element must include a visual clue - or focus control - to indicate the active link. In a text field, the focus control is usually displayed as a blinking insertion point. For a button or link, the focus control is often a dotted box in a contrasting color around the link, but it might also be a change in color, a drop shadow, or other visual clue. The focus must have high contrast and be consistent throughout the page.

It is also important to have the web page predictable for users. People with low vision or those using screen readers, as well as users with cognitive disabilities, may become confused if something unexpected occurs. One simple example is that if the user clicks on a link, he or she needs to know that the link will open in a new window or tab. Another example is allowing a form to auto submit.

Quick Links: Focus Control

    • * Visual Style [US Web Design Standard (draft)] https://standards.usa.gov/visual-style/ Includes an excellent example of need for focus control.

  • Focus [Web Design References: Accessibility [http://www.d.umn.edu/itss/training/online/webdesign/accessibility.html#focus

  • Form controls [US Web Design Standard (draft)] https://standards.usa.gov/form-controls/

  • Focus control and mobile accessibility http://www.last-child.com/focus-mobile-accessibility/

Tab Order

One of the first things to look for is logical "Tab order', which is the sequence of options a keyboard user will be offered while using the Tab key to move around the page. Logical order - generally from left to right and then down - is important for both conveying the meaning of the content and for supporting the operations of buttons and other interactive items.

Note that some users may not use the Tab key in the traditional sense, but may use alternative technology (AT), such as a head pointer, puff switch, etc. Many of these alternative input devices and tools are designed to allow the user to basically 'tab through' the options as they are presented.

Because the AT manufacturers have designed many devices with this in mind, it makes it easy for someone who is adding online material to test this aspect of accessibility.

Test your web page using just a keyboard

    1. Hit the Tab key repeatedly.

      1. You should see a dotted rectangle, reverse of color, or other visual way to indicate the active link or area on the page

      2. As you continue to tab, you will see the sequence - the 'tab order' - that information will be offered to someone using just the keyboard.

    2. Hit the Enter key to make sure the links do what they are supposed to do Use the SHIFT-Tab key to reverse the tab order

Other tips about Tab Order

  • You need to make sure that sighted users, whether they are using AT or not, can see the keyboard focus on the highlighted item as they tab through the page. Traditionally this is indicated with a dotted rectangle around the item. Be sure that the color contrast is sufficient.

Quick Links: Tab Order

  • Ensuring Proper Tab and Read Order [University of Washington] http://www.washington.edu/accessibility/checklist/tab-order/

  • H4: Creating a logical tab order through links, form controls, and objects [W3C] http://www.w3.org/TR/WCAG20-TECHS/H4.html

  • How to Control Tab Order in HTML http://webcheatsheet.com/HTML/controll_tab_order.php

  • Reading order and focus order: accessibility for developers [Access IQ] http://www.accessiq.org/create/content/reading-order-and-focus-order-accessibility-for-developers

Mouse-Only Commands

MouseOver and MouseDown commands cannot be used without a mouse

Multiple key strokes

Some actions require multiple keystrokes such as Control-Alt-Delete

Resources to Explore Further

New links that I find but have not yet looked at closely enough to add to my lists.

Mac OS X - Enabling keyboard access in web browsers http://abilitynet.wikifoundry.com/page/Mac+OS+X+-+Enabling++keyboard+access+in+web+browsers

Keyboard shortcuts - Perform common Firefox tasks quickly https://support.mozilla.org/en-US/kb/keyboard-shortcuts-perform-firefox-tasks-quickly?redirectlocale=en-US&redirectslug=Keyboard+shortcuts

ACCESS KEYBOARD ACCESSIBLE ==from AccessMoOOC

How do you Check for Keyboard Accessibility?

For most websites and software, users do not need a special software to check for keyboard accessibility. There is a simple way to test using just keyboard commands. Put away the mouse and use the following keyboard commands to navigate and to execute hyperlinks, buttons and other interactive elements in the resource.

Try to navigate through two popular websites using the following keyboard keys (without using the mouse) (WebAIM, "Keyboard Accessibility").

- Clicking TAB repeatedly allows you to navigate from button to button and from link to link.

- Clicking SHIFT+TAB allows you to go back to the previous button or link.

- Clicking the SPACEBAR, the return or the enter keys when a link or button is selected activates that link or button.

Note which features are accessible and which are not accessible. If not all content is accessible without using a mouse then that resource does not meet the standards and guidelines listed.

Apps:

Touch Mouse by Logitech - turns iPhone iPod into trackpad/keyboard

Remote Mouse by Remote Mouse (android)

OptiKey https://github.com/OptiKey/OptiKey/wiki

An “assistive on-screen keyboard which runs on Windows. It is designed to be used with a low cost eye-tracking device to bring keyboard control, mouse control and speech to people with motor and speech limitations…” It was “written to challenge the outrageously expensive, unreliable and difficult to use AAC (alternative and augmentative communication) products on the market. It is, therefore, fully open-source and free. Forever.”

When Vision Becomes Verbal [OptiKey]http://www.lawtechnologytoday.org/2015/10/vision-optikey/

.