Accessibility for Windows Runtime apps using JavaScript and HTML

[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]

This topic describes the support for accessibility that is included in the Windows Runtime when you develop a Windows Runtime apps using JavaScript, and explains how to take advantage of that support to create an accessible Windows Runtime apps using JavaScript.

Looking for the C#/VB/C++ version of this topic? See Accessibility for Windows Runtime apps using C#/VB/C++ and XAML.

The topics in this section are designed for developers who are familiar with HTML, Cascading Style Sheets (CSS), and JavaScript.

Support for accessibility is built into the Windows Runtime and specifically into the development processes and runtime environment for a Windows Runtime app using JavaScript. As the Windows Runtime host renders an app UI, accessibility information that is defined in the app markup and the supporting code is exposed through Microsoft UI Automation—the Microsoft accessibility API—and is made available to assistive technology tools such as screen readers. This includes the assistive technology tools that are available as part of Windows itself.

It's simple to provide basic accessibility info as part of a Windows Runtime apps using JavaScript. The markup language is HTML, and there are many established standards, techniques and technologies that have all contributed towards making HTML content accessible, independent of how HTML is particularly used by a Windows Runtime app. The accessibility support for a Windows Runtime app using JavaScript builds on this groundwork and then adds its own accessibility features and techniques. Because all HTML tags and Microsoft Windows Library for JavaScript controls are already accessible, implementing accessibility in Windows Runtime apps using JavaScript typically involves setting just a few HTML attributes.

This documentation focuses on the markup and code that developers need to implement to support the following key accessibility scenarios.

• Screen readers—Users who are blind or visually impaired rely on screen readers to interpret and interact with your app's UI. Interpreting involves reading the UI element names, roles, values, and so on, and interacting with the UI involves moving the focus from one element to another and invoking app functionality.
• Keyboard accessibility—Many accessibility users rely on the keyboard to navigate and operate the UI by:
  • Moving focus among elements by using the Tab key.
  • Navigating in container elements such as lists, grids, and tree views by using the arrow keys.
  • Activating functionality (invoking actions) by using the Enter or Space key.
  • Using shortcut keys to efficiently access other app functionality.
• Accessible visual experience—Users who are visually impaired need a sufficient text contrast ratio for text content, and a good visual experience with high contrast themes overall. Users who are color blind need information to be conveyed in ways other than through color.

While submitting your app to the Windows Store, you can declare your app as accessible. Declaring your app as accessible makes it easier to discover for users who are interested in accessible apps, such as users who have visual impairments. Each of the topics in this section is intended to help you address the guidelines for accessibility so that you can choose to declare your app as accessible.

Note  Declaring the app as accessible is only relevant to the Windows Store.

In this section

• Meeting basic accessibility requirements
• Practices to avoid
• Testing your app for accessibility
• Declaring your app as accessible in the Windows Store
• Guidelines and checklist for accessibility
• Mapping HTML and ARIA properties to UI Automation

Additional resources

• ARIA sample — This sample app demonstrates how to use Accessible Rich Internet Applications (ARIA) tags to make a Windows Store app fully accessible.
• WAI-ARIA Reference — This page of the official World Wide Web Consortium (W3C) Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) specification provides links to reference information for all of the ARIA roles, states, and, properties.
• WAI-ARIA Authoring Practices — This page describes keyboard interaction and identifies the relevant WAI-ARIA roles, states, and properties for a set of widgets and structures.
• HTML5 Specification — This is the official W3C HTML5 specification that includes WAI-ARIA, which is now part of the HTML5 standard.
• OpenAjax Accessibility Examples — This site is an excellent resource for verifying the rules for WAI-ARIA and HTML5. It also contains a number of examples of WAI-ARIA implementations.

Related topics

Accessibility for Windows Runtime apps using C#/VB/C++ and XAML

Accessibility for Windows Runtime apps