[This documentation is preliminary and is subject to change.]
Avoid the following practices if you want your Metro style app using JavaScript app to be accessible.
- Avoid building custom UI elements if you can use standard HTML tags or the controls included with the Metro style app using JavaScript framework. Building a custom UI element, typically by using the div tag, requires more work for accessibility. Standard HTML tags and Metro style app using JavaScript controls are accessible by default, and you only need to set a control's accessible name to make it fully accessible.
- Don’t set the role attribute to an arbitrary value because that does not take advantage of the accessibility support that is built into the Metro style app using JavaScript platform. Setting an element's role attribute to a valid (non-abstract) Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) role value is the only way to enable the platform to correctly represent the element to screen readers and other assistive technology tools.
- Avoid using custom Cascading Style Sheets (CSS) absolute positioning of UI elements. Whenever possible, lay out UI elements in document or logical order to ensure that screen readers can read the UI elements in the correct order. If the visible order of UI elements can diverge from the document or logical order, use the aria-flowto attribute to define the correct reading order.
- Don’t use color as the only way to convey information. Users who are color blind cannot receive information that is conveyed only through color, such as a color status indicator. Include other visual cues, preferably text, to ensure that information is accessible.
- Don’t automatically refresh an entire page. If you need to automatically refresh page content, update only certain areas of the page, and mark the areas as live regions.
- Don’t use UI elements that flash more than three times per second. Flashing elements can cause some people to have seizures. It is best to avoid using UI elements that flash.
- Don’t change user context or activate functionality automatically. Context or activation changes should occur only when the user takes a direct action on a UI element that has focus. Changes in user context include changing focus, displaying new content, and navigating to a different page. Making context changes without involving the user can be disorienting for users who have disabilities. The exceptions to this requirement include displaying submenus, validating forms, displaying help text in another control, and changing context in response to an asynchronous event.
Related topics
Build date: 5/22/2012
