Guidelines and checklist for accessibility (Windows Store apps using JavaScript and HTML)

This topic provides a checklist to help you ensure that your Windows Store app using JavaScript is accessible.

1. Set the accessible name (required) and description (optional) for content and interactive UI elements.

   An accessible name is a short, descriptive text string that a screen reader uses to announce a UI element. You should set the accessible name explicitly for images (use the alt attribute), input fields (use the label tag with the for attribute), custom div controls, so on. Accessible descriptions and tooltips help users understand the UI.

   For more information, see Accessible name and Accessible description (optional).

2. Set and maintain accessible value and status attributes.

   These attributes are important for custom elements, including buttons, lists, check boxes, combo boxes, sliders, progress bars, and so on.

   For more information, see Value and State.

3. Set the role attribute for interactive custom UI elements and regions.

   You should assign a valid Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) role to custom UI elements (for example, interactive div tags) and regions.

   For more information, see Role.

4. Implement keyboard accessibility by doing the following.

   • Set the tabindex attribute for interactive elements.
   • Implement arrow-key navigation for composite elements.
   • Implement keyboard activation.
   • Set access keys or implement accelerator keys.

   For more information, see Implementing keyboard accessibility.

5. Set the aria-live attribute for regions that display dynamic content.

   Setting aria-live enables screen readers to announce UI changes as they happen.

   For more information, see Making live regions accessible.

6. Make tables accessible by setting an accessible name, headers, and summary or description.

   These steps are important for large and complex tables where users need help with understanding data. Don’t forget to mark layout tables with role=“presentation”.

   For more information, see Making tables accessible.

7. Visually verify your UI to ensure that the text contrast is adequate, elements render correctly in the high contrast themes, and colors are used correctly.

   • Select Make everything on your screen bigger to ensure that your app UI scales correctly.
   • Use a color analyzer tool to verify that the visual text contrast ratio is at least 4.5:1.
   • Switch to a high contrast theme and verify that the UI is readable and usable.
   • Ensure that your UI doesn’t use color as the only way to convey information.

   For more information, see Supporting high contrast themes and Meeting requirements for accessible text.

8. Split pages into logical regions and mark the regions with landmark roles and accessible names. This enables assistive technologies to generate page summaries and provide more efficient navigation.

   For more information, see Exposing the logical structure of your app.

9. Run accessibility tools, address reported issues, and verify the screen reading experience.

   Use Inspect to verify programmatic access, run UI Accessibility Checker (AccChecker) to discover common errors, and verify the screen reading experience with Narrator.

   For more information, see Testing your app for accessibility.

10. Declare your app as accessible in the Windows Store.

    If you implemented the baseline accessibility support, marking your app as accessible in the Windows Store can help reach more customers and get some additional good ratings.

    For more information, see Declaring your app as accessible in the Windows Store.

Related topics

Building an accessible Windows Store app with JavaScript

Build date: 11/28/2012