Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @iRajLal

8,441 views

Published on

Learn what accessibility means and how to develop your app and web pages to make it more accessible on mobile devices. An accessible app gives maximum reach to your information, functionality and benefits. The four major disabilities that effect user capabilities are visual, hearing, mobility (difficulty in using the mouse) and cognitive disabilities (which are related to learning abilities). Know how to use the latest HTML5 and Accessible technologies to create for mobile devices.

Published in: Technology
  • Check my MSDN magazine article on Accessible HTML5 design. Building HTML5 Applications - Designing Accessibility with HTML5

    thanks go to Web Axe / Dennis Lembrée for reviewing it.

    http://msdn.microsoft.com/en-us/magazine/jj863135.aspx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • http://www.meetup.com/SV-WindowsPhone/events/83172932/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @iRajLal

  1. 1. Accessibility on Windows Phone Accessible Mobile Apps and Web pages Rajesh Lal Senior Engineer
  2. 2. AgendaMobile Assistive How AT AccessibleAccessibility Technology Works App & (AT) Users Website
  3. 3. Mobile Accessibility
  4. 4. Mobile Accessibility Easy to use at all circumstances and by everyone
  5. 5. Mobile Accessibility: Circumstances • Limited light • Noisy places • Low connectivity • User is Mobile • Temporary Disabled
  6. 6. Mobile Accessibility: Everyone • User with Special Needs • Parents • Senior Citizens • Low Literacy Level
  7. 7. Assistive Technology
  8. 8. 4 Key Areas Hearing Mobility Cognitive Visual
  9. 9. Users of Assistive Technology • Visually Impaired • Blind • Cognitive, Learning Disability • Deaf • Hearing Impaired • Mobility, Physically handicapped
  10. 10. Assistive Technology MobileHardware/Software UserScreen Readers Visual, Blind, CognitiveText Magnifier Visual, CognitiveColor/ Brightness keys Visual, CognitiveHeadphones Cognitive, HearingText/Audio Browser Visual, BlindSpeech Recognition Visual, Blind, Cognitive, MobilityVirtual Keyboards MobilityCaptioning Text Cognitive, Hearing, Deaf
  11. 11. How Assistive Technology Works
  12. 12. How Assistive Technology Works AssistiveTechnology APP / WEB Accessibility APIs
  13. 13. Accessible Apps
  14. 14. Accessible Apps 1. UI Automation 2. Color Contrast 3. Media, Form and Content
  15. 15. 1. UI Automation
  16. 16. UI AutomationAccessibility API to help Assistive Technology interactwith UI elements of an application• Automation Properties• Automation Peer
  17. 17. UI Automation AccessKeyScreen Reader Name HelpText AssistiveTechnology Automation Properties/Peers Platform XAML Accessibility APIs Microsoft UI Automation
  18. 18. UI Automation UI Automation Tree
  19. 19. Automation Properties
  20. 20. Automation PropertiesFor getting or setting the value of instance-level values of automation propertiesThese property values are set as attachedproperties.
  21. 21. Automation Properties
  22. 22. Automation PropertiesName DescriptionAcceleratorKey Keyboard Shortcut “CTRL+C+AccessKey Accessible Key “ALT+F”AutomationId Unique identifier to UI automationHelpText Help description for the element (like tooltip)IsRequiredForForm Element required on a formItemStatus Status of an item in an elementItemType Type of the specified element (file/folder/etc)LabeledBy text label for the elementName Automation name of the element.
  23. 23. Automation Peer2 methods to raise a change notificationAutomationPeer.RaisePropertyChangedEvent method tosignal property changesAutomationPeer.RaiseAutomationEvent method to signalother types of automation changes
  24. 24. 2. Color Contrast
  25. 25. Accessible Apps: Color ContrastUse 5:1 ratio for Foreground to Background color contrast
  26. 26. 3. Accessible Forms, Media, Content
  27. 27. Accessible Apps: Media, Forms, Content• Use TabIndex, IsTabStop for Tab Order in Forms• Use LabeledBy for Form Fields• Use IsRequiredForForm property• Closed Caption, sub-titles For Media• Use Full words in content (LiveHelp != Live Help)
  28. 28. Accessible Web Pages
  29. 29. Accessible Web Pages 1. ARIA 2. HOW ARIA Works 3. Using ARIA 4. Developing Accessible Mobile Website
  30. 30. 1. ARIA
  31. 31. ARIA (Accessible Rich Internet Application)• ARIA is a W3C Initiative & part of HTML5• ARIA helps Assistive Technology(AT)• ARIA Make Web content Accessible to AT• ARIA uses HTML and CSS Tags• Most of ARIA is embedded in JS libraries
  32. 32. 2. How ARIA Works
  33. 33. How ARIA WorksWindows Eye Roles States Properties AssistiveTechnology ARIA Platform HTML Accessibility APIs Windows MSAA UI Automation
  34. 34. 3. Using ARIA
  35. 35. ARIA• Set of Roles, States, and Properties• Assigned to HTML• Exposes web page to Accessibility APIs
  36. 36. ARIA Roles• Landmark Roles – Where Am I• Structural Roles – What’s This• Interface Widget Roles
  37. 37. ARIA Roles Role type Role name Role name Landmark application form roles banner main complementary navigation contentinfo search
  38. 38. ARIA Roles Role type Role name Role name Structural article listitem roles columnheader math definition note directory presentation document region group row heading rowheader img separator list toolbar
  39. 39. ARIA Roles Role type Role name Role name Interface standalone widget spinbutton Widget Roles alert status alertdialog tab button tabpanel checkbox textbox dialog timer gridcell tooltip link treeitem log composite
  40. 40. ARIA Roles Role type Role name Role name Interface marquee widget Widget Roles menuitem combobox menuitemcheckbox grid menuitemradio listbox option menu progressbar menubar radio radiogroup scrollbar tablist slider Tree / treegrid
  41. 41. ARIA States • Dynamic Properties • Global States • Widget States
  42. 42. ARIA State Attribute type Global Widget ARIA states aria-busy listitem aria-disabled math aria-grabbed note aria-hidden presentation aria-invalid region row rowheader separator toolbar
  43. 43. ARIA Properties • Relatively Static Properties
  44. 44. ARIA PropertiesAttribute type Global WidgetARIA aria-atomic aria-Properties aria-controls autocomplete aria-describedby aria-haspopup aria-dropeffect aria-label aria-flowto aria-level aria-haspopup aria-multiline aria-label aria- aria-labelledby multiselectable
  45. 45. ARIA PropertiesAttribute type Global WidgetARIA aria-live aria-orientationProperties aria-owns aria-readonly aria-relevant aria-required aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext
  46. 46. Accessible Website with HTML5 Home Contact About
  47. 47. Accessible HTML5 Home page <header role="banner"> <nav role="navigation"> <section role=“main”> <footer role=“contentinfo”> … HTML5 Accessible HTML5
  48. 48. Accessible HTML5 Contact Form
  49. 49. Accessible HTML5 Form HTML5• Use label tag for describing form elements• Associate labels with controls using for attribute• Create a logical tab order with tabindex• Use placeholder, type=email, url, text• Use fieldset and legend to group form elements
  50. 50. Accessible HTML5 Form ARIA• Use role=main and keep one form in one page• Use aria-required for required fields• Use aria-live=assertive in the form for validation• Use aria-describedby for adding help to fields
  51. 51. Accessible About Page• Accessible Image• Accessible Text and Links
  52. 52. Accessible ImageUse alt attribute for alternative text for the imageUse title attribute for tooltipUse role=presentation to ignore the imageUse blank alt for decorative imagesUse meaningful name for src=meaningful.png
  53. 53. Accessible Text and Links• Font size should always be relative , never fixed• Links should be underlined and visited different color• Use Anchor links, easily navigable by screen readers• Meaningful link text , avoid using “click here” or “more”• Color in CSS with foreground & background color• Simple and Machine readable words like “Home page”
  54. 54. Reference • Automation Properties http://msdn.microsoft.com/en-us/library/ms606856(v=vs.95).aspx • Automation Peer http://msdn.microsoft.com/en-us/library/system.windows.automation.peers.automationpeer(v=vs.95).aspx • W3C ARIA http://dev.w3.org/html5/markup/aria/aria.html
  55. 55. Thank You Raj Lalrajesh.lal@nokia.com Twitter @ iRajLal

×