Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @iRajLal
Download as PPTX, PDF3 likes7,551 views
The document discusses mobile accessibility on Windows Phone, focusing on assistive technologies that support users with special needs in various circumstances. It outlines essential components for creating accessible mobile apps and web pages, including UI automation, color contrast, and ARIA (Accessible Rich Internet Applications). Additionally, it provides guidelines on making apps user-friendly for individuals with visual, cognitive, and hearing impairments.
Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @iRajLal
- 1. Accessibility on Windows Phone Accessible Mobile Apps and Web pages Rajesh Lal Senior Engineer
- 2. Agenda Mobile Assistive How AT Accessible Accessibility Technology Works App & (AT) Users Website
- 4. Mobile Accessibility Easy to use at all circumstances and by everyone
- 5. Mobile Accessibility: Circumstances • Limited light • Noisy places • Low connectivity • User is Mobile • Temporary Disabled
- 7. Mobile Accessibility: Everyone • User with Special Needs • Parents • Senior Citizens • Low Literacy Level
- 10. 4 Key Areas Hearing Mobility Cognitive Visual
- 11. Users of Assistive Technology • Visually Impaired • Blind • Cognitive, Learning Disability • Deaf • Hearing Impaired • Mobility, Physically handicapped
- 12. Assistive Technology Mobile Hardware/Software User Screen Readers Visual, Blind, Cognitive Text Magnifier Visual, Cognitive Color/ Brightness keys Visual, Cognitive Headphones Cognitive, Hearing Text/Audio Browser Visual, Blind Speech Recognition Visual, Blind, Cognitive, Mobility Virtual Keyboards Mobility Captioning Text Cognitive, Hearing, Deaf
- 13. How Assistive Technology Works
- 14. How Assistive Technology Works Assistive Technology APP / WEB Accessibility APIs
- 15. Accessible Apps
- 16. Accessible Apps 1. UI Automation 2. Color Contrast 3. Media, Form and Content
- 17. 1. UI Automation
- 18. UI Automation Accessibility API to help Assistive Technology interact with UI elements of an application • Automation Properties • Automation Peer
- 19. UI Automation AccessKey Screen Reader Name HelpText Assistive Technology Automation Properties/Peers Platform XAML Accessibility APIs Microsoft UI Automation
- 20. UI Automation UI Automation Tree
- 22. Automation Properties For getting or setting the value of instance- level values of automation properties These property values are set as attached properties.
- 24. Automation Properties Name Description AcceleratorKey Keyboard Shortcut “CTRL+C+ AccessKey Accessible Key “ALT+F” AutomationId Unique identifier to UI automation HelpText Help description for the element (like tooltip) IsRequiredForForm Element required on a form ItemStatus Status of an item in an element ItemType Type of the specified element (file/folder/etc) LabeledBy text label for the element Name Automation name of the element.
- 25. Automation Peer 2 methods to raise a change notification AutomationPeer.RaisePropertyChangedEvent method to signal property changes AutomationPeer.RaiseAutomationEvent method to signal other types of automation changes
- 27. Accessible Apps: Color Contrast Use 5:1 ratio for Foreground to Background color contrast
- 28. 3. Accessible Forms, Media, Content
- 29. 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)
- 31. Accessible Web Pages 1. ARIA 2. HOW ARIA Works 3. Using ARIA 4. Developing Accessible Mobile Website
- 32. 1. ARIA
- 33. 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
- 34. 2. How ARIA Works
- 35. How ARIA Works Windows Eye Roles States Properties Assistive Technology ARIA Platform HTML Accessibility APIs Windows MSAA UI Automation
- 36. 3. Using ARIA
- 37. ARIA • Set of Roles, States, and Properties • Assigned to HTML • Exposes web page to Accessibility APIs
- 38. ARIA Roles • Landmark Roles – Where Am I • Structural Roles – What’s This • Interface Widget Roles
- 39. ARIA Roles Role type Role name Role name Landmark application form roles banner main complementary navigation contentinfo search
- 40. 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
- 41. 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
- 42. 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
- 43. ARIA States • Dynamic Properties • Global States • Widget States
- 44. 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
- 45. ARIA Properties • Relatively Static Properties
- 46. ARIA Properties Attribute type Global Widget ARIA 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
- 47. ARIA Properties Attribute type Global Widget ARIA aria-live aria-orientation Properties aria-owns aria-readonly aria-relevant aria-required aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext
- 48. Accessible Website with HTML5 Home Contact About
- 49. Accessible HTML5 Home page <header role="banner"> <nav role="navigation"> <section role=“main”> <footer role=“contentinfo”> … HTML5 Accessible HTML5
- 50. Accessible HTML5 Contact Form
- 51. 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
- 52. 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
- 53. Accessible About Page • Accessible Image • Accessible Text and Links
- 54. Accessible Image Use alt attribute for alternative text for the image Use title attribute for tooltip Use role=presentation to ignore the image Use blank alt for decorative images Use meaningful name for src=meaningful.png
- 55. 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”
- 56. 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
- 57. Thank You Raj Lal rajesh.lal@nokia.com Twitter @ iRajLal
Editor's Notes
- #5: by providing alternate ways
- #36: If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
- #38: 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.
- #39: 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.
- #40: 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.
- #41: 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.
- #42: 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.
- #43: 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.
- #44: 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
- #45: 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.
- #46: 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.
- #47: 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.
- #48: 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.
- #49: If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
- #50: If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
- #51: If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
- #52: If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
- #53: If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
- #54: If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
- #55: If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
- #56: If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.
- #57: If you lighten the light colors and darken the dark colors in your design, you will increase its visual accessibility.