1. Reaching more customers with accessible Metro style apps using HTML5
11/8/2018 3:01 AM
APP-843T
Reaching more customers with accessible Metro style apps using HTML5
Guy Barker
Senior Software Development Engineer
Microsoft Corporation
© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

2. Agenda Why reaching more customers with accessible apps matters
Start building a new Metro style app
Coding for accessibility scenarios
Testing your app for accessibility
Publishing an accessible app

3. Reaching more customers with accessible apps
The majority of working-age users are likely to benefit from the use of accessible technology
17% users with disabilities
40% users with mild impairments
43% users with no impairments
Study commissioned by Microsoft, Conducted by Forrester Research 2004

4. Accessible through HTML5 & ARIA
Your Metro style app in HTML5 is made accessible by using industry standard HTML5 and Accessible Rich Internet App (ARIA) markup.
Roles, such as “button”, “listbox”, “log”
Properties, such as “aria-label”, “aria-live”
The information can be accessed through the UI Automation API

6. Built-in accessibility support
Creating - Templates, Samples
Developing - Controls, IntelliSense
Verifying - Runtime analysis
Selling - Accessibility declaration & filter

7. Creating The templates in Visual Studio Express are accessible.
Apps can be used with Narrator
Apps are fully keyboard accessible
Apps work in High Contrast mode

8. Creating accessible apps
demo
Creating accessible apps
Creating a new app from a template
Using the app with Narrator and the keyboard
Adding a new input control
Giving the new control an accessible name
Running the app in High Contrast mode

9. Developing Platform elements have built-in support for accessibility
Developers may only need to set accessible names
Code custom elements to support accessibility scenarios
Screen reading
Keyboard accessibility
Visual experience

10. demo
Screen Reading
Visual Studio’s IntelliSense and property pane include accessibility attributes (HTML5/ARIA).
The accessible name, role are exposed for assistive technologies. Elements with dynamic content are marked as live regions.
Accessible tables, landmarks provide more helpful information.

11. Keyboard Accessibility
demo
Keyboard Accessibility
All interactive elements must be in the tab order.
Users must be able to activate all functionality with the keyboard.
Navigation within containers with the arrow keys .
Shortcuts for access keys.

13. demo Visual Experience High contrast themes work by default.
The platform supports customization.

14. Verifying
Accessibility testing tools are available in the Windows 8 SDK
Use Inspect to verify accessibility properties
Run AccChecker to detect common errors

15. Inspect AccChecker ARIA verifications.
demo
Testing Tools
Inspect
AccChecker ARIA verifications.

16. Selling Declare an accessible app in the store
Declaration means that your app supports baseline accessibility
Reach more customers through accessibility
App is listed under the accessible filter

17. Declaring an accessible app

18. Filtering on accessible apps

19. User feedback Reach more customers through good ratings
More positive ratings means better visibility across the store
Store provides a feedback loop between the accessibility community and developers
Accessibility related feedback will be channeled to developers

20. Call to action
Windows 8 app model implements “accessibility by default” which makes building accessible Metro style apps simple and easy
This opens new avenues for developers to reach more customers by building accessible apps

21. Related sessions APP-189T Build assistive technologies for Windows 8
APP-411T Reach a worldwide audience by building a world-ready app
APP-846T Create reusable custom Metro style controls

22. Further reading and documentation
Learn more about Metro style apps at the Windows Dev Center
Metro style apps Samples home
Metro style app development forums
Mapping HTML and ARIA properties to UI Automation

23. thank you Feedback and questions http://forums.dev.windows.com
Session feedback

24. © 2011 Microsoft Corporation. All rights reserved
© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.