Responding to keyboard interactions (Windows Store apps)

In this section we describe how new Windows UI in Windows 8 supports user interactions with a hardware keyboard or the touch keyboard. We show you how to take full advantage of keyboard capabilities to control the system and Windows Store apps using JavaScript.

This info is relevant for developers building Windows Store apps for tablets and computers that have an attached keyboard device or need to support the touch keyboard Soft Input Panel (SIP) or the On-Screen Keyboard.

See Displaying and editing text for more info on text input.

For more info on the markup and code required to provide keyboard support in a Windows Store app using JavaScript, see Implementing keyboard accessibility.

Overview

Keyboard input is an important part of the overall user interaction experience for Windows Store apps in Windows 8. The keyboard is indispensable to people with certain disabilities or users who just consider it a more efficient way to interact with an app.

A well-designed keyboard UI is an important aspect of software accessibility. It enables users with vision impairments or who have certain motor disabilities to navigate an app and interact with its features. Such users might be unable to operate a mouse and instead rely on various assistive technologies such as keyboard enhancement tools, on-screen keyboards, screen enlargers, screen readers, and voice input utilities.

A keyboard-optimized app lets users access commands and controls through the keyboard alone. Some basic keyboard interactions include:

• Navigate the app and activate elements by using the Tab and arrow keys.
• Invoke the primary action of an element through the spacebar and Enter keys.
• Press Windows Logo Key+Z to show or hide an app bar.
• Press Windows Logo Key+C to show or hide the charms.
• Press Windows Logo Key+TAB to switch apps.
• Press Page Up/Down keys to scroll through content.
• Press Ctrl+Plus(+)/Minus(-) keys to switch between semantic zoom levels.

In addition to a hardware keyboard, Windows 8 provides two software keyboards:

• The On-Screen Keyboard is for systems that don't have a physical keyboard, or for users whose mobility impairments prevent them from using traditional physical input devices. The On-Screen Keyboard emulates most, if not all, the functionality of a hardware keyboard.
• The touch keyboard SIP is not a replacement for the accessibility On-Screen Keyboard SIP. The touch keyboard is for text input only (it doesn't emulate the hardware keyboard) and appears only when an editable input field gets focus.

  Note  the On-Screen Keyboard has priority over the touch keyboard, which won't be shown if the On-Screen Keyboard is present.

User experience guidelines for supporting keyboard interactions

Use these guidelines when supporting keyboard interactions:

• Users should be able to accomplish all tasks supported by your app using only the hardware keyboard or the On-Screen Keyboard.

  Note  Use the touch keyboard for text input only, not for commands or keyboard shortcuts.

• When your app starts, set initial keyboard focus on the element that users will intuitively (or most likely) interact with first. Typically, the most appropriate location is the main content view of the app so that a user can immediately scroll the content using the arrow keys. For more info on setting focus to specific controls, see focus.
• Make sure the Tab and arrows keys move through content in a logical order.
• Set the tabIndex attribute to a value that is greater than or equal to 0 for all interactive UI elements that are not in the tab order by default. Setting the tabIndex attribute is important because screen reader users navigate among interactive UI elements by using the Tab key.
• Use the arrow keys as keyboard shortcuts for proper inner navigation among child elements of composite elements. If tree view nodes have separate child elements for handling expand–collapse and node activation, use the left and right arrow keys to provide keyboard expand–collapse functionality.
• Ensure that each UI element that can be clicked can also be invoked with the keyboard.

• Implement keyboard shortcuts for key app functionality. (A shortcut is a key combination that enhances productivity by providing an efficient way for the user to access app functionality.)

  An access key is a shortcut to a UI element in your app. It consists of the Alt key and a letter key.

  An accelerator key is a shortcut to an app command. Your app can have UI that corresponds exactly to the command. Accelerator keys consist of the Ctrl key and a letter key.

  You must provide an easy way for users who rely on screen readers and other assistive technology to discover your app's shortcut keys. Declare your shortcut keys in your app's HTML markup by using the accessKey and -ms-AcceleratorKey attributes, and communicate shortcut keys by using tooltips, accessible names, accessible descriptions, or some other form of on-screen communication. Remember to document shortcut keys well in your app's help content.

  For more guidance about implementing shortcut keys, see Shortcut keys in the Windows User Experience Guidelines.

• Use focus rectangles only with keyboard interactions.

Common keyboard shortcuts

Here are common keyboard shortcuts that users expect from your Windows Store apps.

Related topics

Conceptual

Responding to user interaction

Implementing keyboard accessibility

Quickstart: adding HTML controls and handling events

Samples (Windows Store app APIs)

Input: Device capabilities sample

Input: Touch keyboard sample

Input: XAML user input events sample

Responding to the appearance of the on-screen keyboard sample

Build date: 11/29/2012