Successfully reported this slideshow.
Accessibility on Windows Phone     Accessible Mobile Apps and Web pages                               Rajesh Lal          ...
AgendaMobile        Assistive    How AT   AccessibleAccessibility Technology   Works    App &              (AT) Users     ...
Mobile Accessibility
Mobile Accessibility   Easy to use   at all circumstances and by everyone
Mobile Accessibility: Circumstances •   Limited light •   Noisy places •   Low connectivity •   User is Mobile •   Tempora...
Mobile Accessibility: Everyone •   User with Special Needs •   Parents •   Senior Citizens •   Low Literacy Level
Assistive Technology
4 Key Areas          Hearing         Mobility         Cognitive              Visual
Users of Assistive Technology •   Visually Impaired •   Blind •   Cognitive, Learning Disability •   Deaf •   Hearing Impa...
Assistive Technology MobileHardware/Software UserScreen Readers           Visual, Blind, CognitiveText Magnifier          ...
How Assistive Technology Works
How Assistive Technology Works AssistiveTechnology                             APP / WEB             Accessibility        ...
Accessible Apps
Accessible Apps 1. UI Automation 2. Color Contrast 3. Media, Form and Content
1. UI Automation
UI AutomationAccessibility API to help Assistive Technology interactwith UI elements of an application• Automation Propert...
UI Automation                                     AccessKeyScreen Reader               Name                 HelpText Assis...
UI Automation                UI Automation Tree
Automation Properties
Automation PropertiesFor getting or setting the value of instance-level values of automation propertiesThese property valu...
Automation Properties
Automation PropertiesName                DescriptionAcceleratorKey      Keyboard Shortcut “CTRL+C+AccessKey           Acce...
Automation Peer2 methods to raise a change notificationAutomationPeer.RaisePropertyChangedEvent method tosignal property c...
2. Color Contrast
Accessible Apps: Color ContrastUse 5:1 ratio for Foreground to Background color contrast
3. Accessible Forms, Media, Content
Accessible Apps: Media, Forms, Content• Use TabIndex, IsTabStop for Tab Order in Forms• Use LabeledBy for Form Fields• Use...
Accessible Web Pages
Accessible Web Pages 1.   ARIA 2.   HOW ARIA Works 3.   Using ARIA 4.   Developing Accessible Mobile Website
1. ARIA
ARIA (Accessible Rich Internet Application)• ARIA is a W3C Initiative & part of HTML5• ARIA helps Assistive Technology(AT)...
2. How ARIA Works
How ARIA WorksWindows Eye               Roles   States   Properties AssistiveTechnology                                  A...
3. Using ARIA
ARIA• Set of Roles, States, and Properties• Assigned to HTML• Exposes web page to Accessibility APIs
ARIA Roles• Landmark Roles – Where Am I• Structural Roles – What’s This• Interface Widget Roles
ARIA Roles Role type   Role name       Role name Landmark    application     form roles       banner          main        ...
ARIA Roles Role type    Role name      Role name Structural   article        listitem roles        columnheader   math    ...
ARIA Roles Role type      Role name           Role name Interface      standalone widget   spinbutton Widget Roles   alert...
ARIA Roles Role type      Role name          Role name Interface      marquee            widget Widget Roles   menuitem   ...
ARIA States • Dynamic Properties • Global States • Widget States
ARIA State Attribute type Global          Widget ARIA states    aria-busy       listitem                aria-disabled   ma...
ARIA Properties • Relatively Static Properties
ARIA PropertiesAttribute type Global             WidgetARIA           aria-atomic        aria-Properties     aria-controls...
ARIA PropertiesAttribute type Global          WidgetARIA           aria-live       aria-orientationProperties     aria-own...
Accessible Website with HTML5                   Home         Contact          About
Accessible HTML5 Home page                  <header role="banner">                  <nav role="navigation">               ...
Accessible HTML5 Contact Form
Accessible HTML5 Form  HTML5• Use label tag for describing form elements• Associate labels with controls using for attribu...
Accessible HTML5 Form ARIA• Use role=main and keep one form in one page• Use aria-required for required fields• Use aria-l...
Accessible About Page• Accessible Image• Accessible Text and Links
Accessible ImageUse alt attribute for alternative text for the imageUse title attribute for tooltipUse role=presentation t...
Accessible Text and Links• Font size should always be relative , never fixed• Links should be underlined and visited diffe...
Reference  • Automation Properties    http://msdn.microsoft.com/en-us/library/ms606856(v=vs.95).aspx  • Automation Peer   ...
Thank You     Raj Lalrajesh.lal@nokia.com  Twitter @ iRajLal
Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @iRajLal
Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @iRajLal
Prochain SlideShare
Chargement dans…5
×

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

8 288 vues

Publié le

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.

Publié dans : Technologie

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

×