Responding to keyboard interactions (Windows Store apps)
Design and build Windows Store apps that users can interact with through a hardware keyboard, the On-Screen Keyboard, or the touch keyboard.
This info is relevant for developers who are building Windows Store apps for tablets and computers that have an attached keyboard device, or who 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 providing keyboard support in a Windows Store apps, see Implementing keyboard accessibility.
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.
The most common type of keyboard is the external, hardware keyboard that is physically connected to a device. In addition to a hardware keyboard, Windows 8 provides two software keyboards:
- The On-Screen Keyboard is a visual, software keyboard that you can use instead of the physical keyboard to type and enter data using touch, mouse, pen/stylus or other pointing device (a touch screen is not required). The On-Screen Keyboard is provided 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 is a visual, software keyboard used for text entry with touch input. The touch keyboard is not a replacement for the On-Screen Keyboard as it is used for text input only (it doesn't emulate the hardware keyboard) and appears only when a text field or other editable text control 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.
Here are examples of the touch keyboard. The first image is the default layout, the second is the thumb layout (which might not be available in all languages).
Here are some guidelines for 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 The touch keyboard is used for text input only, not for app or system commands.
- 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.
Do not redefine the default keyboard shortcuts users expect from within every Windows Store app. See Keyboard shortcuts for a comprehensive list.
Query the keyboard device capabilities (KeyboardCapabilities) to determine if a keyboard is attached and to identify what aspects of your app UI the keyboard hardware can access directly. For more info on querying device capabilities, see Quickstart: Identifying pointer devices.
Associate keyboard buttons with appropriate UI (back and forward buttons) in your app.
- Use focus rectangles only with keyboard interactions. If the user initiates a touch interaction, make the keyboard UI gradually fade away. This keeps the UI clean and uncluttered.
- Don't display visual feedback if an element doesn't support interaction (such as static text).
- Display visual feedback concurrently for all elements that represent the same input target.
- Provide on-screen buttons (such as + and -) as hints for emulating touch-based manipulations such as panning, rotating, zooming, and so on.
For more general guidance on visual feedback, see Guidelines for visual feedback.
- 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/16/2013