1 / 39

How to build an accessible Windows 8.1 app

How to build an accessible Windows 8.1 app. Premalini David Program Manager, Windows Accessibility 2-001. Agenda. What is software accessibility? Why build accessible apps? Top built-in Accessibility features Key points to build accessible apps. What is Software Accessibility?

gafna
Download Presentation

How to build an accessible Windows 8.1 app

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. How to build an accessible Windows 8.1 app Premalini DavidProgram Manager, Windows Accessibility 2-001

  2. Agenda • What is software accessibility? • Why build accessible apps? • Top built-in Accessibility features • Key points to build accessible apps

  3. What is Software Accessibility? Software accessibility is the ability to make your applications usable by those with disabilities.

  4. Agenda • What is software accessibility? • Why build accessible apps? • Top built-in Accessibility features • Key points to build accessible apps

  5. Why build Accessible apps? • Reach more customers!! • Comply with federal regulations Source: WHO, ILO and US Census Bureau

  6. Why build Accessible apps? • Reach more customers!! • 1.2 billion disabled individuals world-wide • 386 million are working-age people • 34.7% of disabled individuals in the US alone are in the working-age category! Source: WHO, ILO and US Census Bureau

  7. Why build Accessible apps? • For Compliance purposes: • Communication Apps: Twenty First Century Communications and Video Accessibility Act compliance by Oct 2013 in the US • Web Apps: Section 508 of the US Rehabilitation Act Source: WHO, ILO and US Census Bureau

  8. Agenda • What is software accessibility? • Why build accessible apps? • Top Built-in Accessibility features • Key points to build accessible apps

  9. Top Built-in Accessibility features • Make things on screen larger • Turning off animations • Formatted text reading support

  10. Turning off Animations

  11. Formatted text reading support • XAML now supports screen reading of formatted text within TextBlocks, RichTextBlock and RichTextBlockOverflowcontrols

  12. Agenda • What is software accessibility? • Why build accessible apps? • Top built-in Accessibility features • Key points to build accessible apps

  13. Let’s walkthrough the steps Design Develop Test S e l l !!!!!

  14. Accessible Visual Design Keyboard Navigation Screen Reading • Key Areas of focus for building accessible apps

  15. Accessible Visual Design- Support High Contrast Keyboard Navigation Screen Reading • Key Areas of focus for building accessible apps

  16. DEMO - Design and code for Keyboard Navigation and Screen Reading

  17. Users Assistive Technologies (Screen readers, magnifiers..etc.) UI Automation Framework Provided by the Windows Platform XAML and C++/C#/VB –Use Automation Properties WINJS and HTML5 – Use ARIA Properties

  18. RECAP of code changes

  19. Supporting Tab indexing for KB navigation • XAML Code Snippet • <TextBox TabIndex="1" Width="200" Grid.Column="1"…/> • WINJS/HTML Code Snippet • <textarea id="Text Area1" tabindex="1"...></textarea>

  20. Providing an Accessible name • XAML Code Snippet: • <TextBox AutomationProperties.Name= "First Name" .../> • WINJS /HTML code snippet • <textareaaria-label= “First Name" ...></textarea>

  21. No elements missing accessible names

  22. Use of Live Regions • XAML Code Snippet • <TextBlockText="Submission Successful!" • AutomationProperties.LiveSetting="Assertive" .../> • <!--OR • AutomationProperties.LiveSetting="Polite" .../> --> • In the code behind file, raise a LiveRegionChanged event as part of changing the text • AutomationPeerpeer = TextBlockAutomationPeer.FromElement(tblSubmissionStatus); • peer.RaiseAutomationEvent(AutomationEvents.LiveRegionChanged);

  23. Use of Live Regions • HTML Code snippet • <textarea id="TextArea1" aria-live="assertive" ...></textarea>

  24. Accessible Visual DesignSupport High Contrast Keyboard Navigation Support Tabbing Screen Reading Accessible Names, Live Regions • Key Areas of focus for building accessible apps

  25. Selling your app • Mark your App as being accessible on the Store!

  26. Recap - How to build Accessible apps • Design and Develop for: • Accessible visual design • KB navigation • Screen Reading • Leverage common controls for built-in platform support • Testing tools –UI Accessibility Checker(AccChecker) • Selling – mark app as being accessible on the Store !!!

  27. Resources • Go to the Windows Dev Center. Look up the following topics: • Making your app accessible • Guidelines and Checklists for Accessibility • Testing your app for Accessibility • Accessibility testing tools available in the Windows SDK: • UI Accessibility Checker(AccChecker) • Inspect • AccEvent

  28. Resources • Accessibility Samples in the Windows SDK • XAML Accessibility sample • XAML High Contrast sample • ARIA sample

  29. Recommended sessions to attend • 2-164: What’s New in XAML by Tim Heuer • 2-165: What’s New in WINJS by Paul Gusmorino • 2-082: Creating your first app using XAML by Harini Kannan

  30. Required Slide *delete this box when your slide is finalized Your MS Tag will be inserted here during the final scrub. Evaluate this session • Scan this QR codeto evaluate this session and be automatically entered in a drawing to win a prize!

More Related