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
Upcoming SlideShare
Loading in …5
×

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

7,260
-1

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
2 Comments
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
7,260
On Slideshare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
16
Comments
2
Likes
2
Embeds 0
No embeds

No notes for slide
  • by providing alternate ways
  • If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  • ARIA uses a set of roles, states and properties to exposes your web page to the Accessibility APIs. These roles, states and properties are assigned on a webpage’s elements and they get exposed to the AT.
  • ARIA uses a set of roles, states and properties to exposes your web page to the Accessibility APIs. These roles, states and properties are assigned on a webpage’s elements and they get exposed to the AT.
  • ARIA uses a set of roles, states and properties to exposes your web page to the Accessibility APIs. These roles, states and properties are assigned on a webpage’s elements and they get exposed to the AT.
  • ARIA uses a set of roles, states and properties to exposes your web page to the Accessibility APIs. These roles, states and properties are assigned on a webpage’s elements and they get exposed to the AT.
  • ARIA uses a set of roles, states and properties to exposes your web page to the Accessibility APIs. These roles, states and properties are assigned on a webpage’s elements and they get exposed to the AT.
  • ARIA uses a set of roles, states and properties to exposes your web page to the Accessibility APIs. These roles, states and properties are assigned on a webpage’s elements and they get exposed to the AT.
  • ARIA state is a dynamic property of an HTML element which represents data associated with the object but do not affect the essential nature of the element. There are two types of ARIA states, Global and Widget state
  • ARIA properties are similar to ARIA states but are relatively static in the web page and acts as additional properties to the HTML element.This will make the input field required in the form for Accessible devices.
  • ARIA properties are similar to ARIA states but are relatively static in the web page and acts as additional properties to the HTML element.This will make the input field required in the form for Accessible devices.
  • ARIA properties are similar to ARIA states but are relatively static in the web page and acts as additional properties to the HTML element.This will make the input field required in the form for Accessible devices.
  • ARIA properties are similar to ARIA states but are relatively static in the web page and acts as additional properties to the HTML element.This will make the input field required in the form for Accessible devices.
  • If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  • If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  • If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  • If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  • If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  • If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  • If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  • If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  • If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
  • 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×