16 out of 39 rated this helpful - Rate this topic

Design for accessibility (Windows Store apps)

As you design your app, always keep in mind that your users have a wide range of abilities, disabilities, and preferences. Following accessible design principles from the beginning helps ensure that your app is accessible to the widest possible audience, and helps attract more customers to your app in the Windows Store.

Accessibility scenarios

Designing your app with accessibility in mind helps ensure that it works well in the following accessibility scenarios.

Screen reading: Blind or visually impaired users rely on screen readers to help them create and maintain a mental model of your app's UI. Hearing information about the UI, including the names of UI elements, helps users understand the UI content and invoke available functionality.
To support screen reading, your app needs to provide sufficient and correct information about its UI elements, including the name, role, description, state, position, and so on. Learn more about exposing information about UI elements.
Keyboard accessibility: The keyboard is integral to using a screen reader, and it is also important for users who prefer the keyboard as a more efficient way to interact with an app. An accessible app lets users access all interactive UI elements by keyboard only, enabling users to:
- Navigate the app by using the Tab and arrow keys.
- Activate UI elements by using the Spacebar and Enter keys.
- Access commands and controls by using keyboard shortcuts.
The On-Screen Keyboard is available for systems that don't include a physical keyboard, or for users whose mobility impairments prevent them from using traditional physical input devices.

Learn more about implementing keyboard accessibility.
Accessible visual experience: Visually impaired users need text to be displayed with a high contrast ratio. They also need a UI that looks good in high-contrast mode and scales properly after selecting Make everything on your screen bigger in the Ease of Access control panel. Where color is used to convey information, users with color blindness need color alternatives like text, shapes, and icons. Learn more about supporting high contrast and meeting requirements for accessible text.

Accessibility support in the development platform

The Windows 8 development platform supports accessibility in all stages of the development cycle:

Creating: The code generated from the Microsoft Visual Studio Express 2012 for Windows 8 app templates includes accessibility information.
Coding: The development platform includes the following accessibility support during the coding stage.
- Microsoft IntelliSense in Visual Studio Express 2012 for Windows 8 includes accessibility information.
- The controls included in the Windows 8 platform have built-in support for accessibility.
- The Windows Dev Center documentation includes accessibility guidelines and sample apps.
Testing: The Windows Software Development Kit (SDK) for Windows 8 includes accessibility testing tools. Learn more about testing your app for accessibility.
Selling: You can mark your app as accessible when you publish it in the Windows Store, enabling users to discover your app by using the Accessibility filter when browsing the store. Learn more about declaring your app as accessible in the Windows Store.

Use the platform controls

The standard HTML tags, JavaScript controls, and XAML controls included in the Windows 8 platform have built-in support for accessibility. By using the platform HTML and controls, you can get most accessibility support "for free." For example, the ratings control is fully accessible without any additional work, while the ListView control requires only an accessible name for the main list element—all other accessibility support is built in. For a list of platform controls, see Controls list.

Provide basic accessibility information

Although you get most accessibility support "for free," you still need to set an accessible name for most of your controls and graphical content such as images, charts, and drawing areas. The accessible name is read by screen readers to help the user understand the controls and content. For elements with implicit text like static text, buttons, and links, the system automatically uses the implicit text as the accessible name. Learn more about accessible names.

You must also provide additional accessibility information for UI elements that contain dynamic content, such as a live region in a Windows Store app using JavaScript with HTML. The additional accessibility information lets screen readers announce changes that occur to the content. To provide accessibility information for a live region, set the aria-live attribute on elements that contain dynamic content. Learn more about making live regions accessible.

To ensure that your app is visually accessible, provide high-contrast images and manually set colors that meet contrast and color-blindness requirements. Learn more about supporting high contrast.

Make your custom controls accessible

If you use a custom control, you need to provide all of the basic accessibility information for the control, including the accessible name, role, state, value, and so on. You also need to ensure that the control is fully accessible by keyboard, and that the UI meets requirements for visual accessibility.

For example, suppose you include a div element that represents a custom interactive element; that is, it handles the onclick event. You must:

Set an accessible name for the div element.
Set the role attribute to the corresponding interactive Accessible Rich Internet Applications (ARIA) role, such as "button”.
Set the tabindex attribute to include the element in the tab order.
Add keyboard event handlers to support keyboard activation; that is, the keyboard equivalent of an onclick event handler.

To learn more about exposing custom UI elements for accessibility, see Accessible Rich Internet Applications (ARIA).

Avoid using canvas

The HTML5 canvas element doesn’t support accessibility. Because it doesn’t provide any way to expose accessibility information for its content, avoid using canvas unless it is absolutely necessary. If you do use canvas, treat it as a custom UI element.