1 / 25

Reaching more customers with accessible Metro style apps using HTML5

APP-843T. Reaching more customers with accessible Metro style apps using HTML5 . Guy Barker Senior Software Development Engineer Microsoft Corporation. Agenda. Why reaching more customers with accessible apps matters Start building a new Metro style app

dee
Download Presentation

Reaching more customers with accessible Metro style apps using HTML5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. APP-843T Reaching more customers with accessible Metro style apps using HTML5 Guy Barker Senior Software Development Engineer Microsoft Corporation

  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

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

  6. 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

  7. 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

  8. 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

  9. 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.

  10. 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.

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

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

  13. demo Testing Tools Inspect AccChecker ARIA verifications.

  14. 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

  15. Declaring an accessible app

  16. Filtering on accessible apps

  17. 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

  18. 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

  19. 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

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

  21. thank you Feedback and questions http://forums.dev.windows.com Session feedbackhttp://bldw.in/SessionFeedback

  22. © 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.

More Related