Your SlideShare is downloading. ×
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Focus Management and Accessibility on iOS, Android, and HTML5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Focus Management and Accessibility on iOS, Android, and HTML5

4,436

Published on

The iPhone revolutionized the world for people with disabilities. Nobody (outside Apple) imagined this touch-only phone with no physical buttons would become the defacto device for people with …

The iPhone revolutionized the world for people with disabilities. Nobody (outside Apple) imagined this touch-only phone with no physical buttons would become the defacto device for people with disabilities. In fact, today's smart phones have not only replaced computers, but also expensive dedicated assistive technology equipment.

Make your application accessible

To be accessible, your app's content must be discoverable, actionable, and understandable. All of these depend on management of content focus. Fortunately, the platforms have made this fairly easy. The first step is being aware, that is the first part of this presentation. You will learn how to navigate with a phone's screen reader.

This presentation is available in an accessible version: http://www.last-child.com/focus-mobile-accessibility/

Published in: Technology, Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,436
On Slideshare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
15
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Focus on Accessibility Mobile Web + DevCon 2013 Ted Drake, Intuit Accessibility This presentation: slideshare.net/7mary4/ Wednesday, July 17, 13 This presentation was prepared for the Mobile Web + Dev Conference 2013 in San Jose. It focuses on the importance of controlling focus on mobile devices for accessibility
  • 2. Wednesday, July 17, 13 Tommy Edison, the Blind Film Critic, shows how he uses Instagram on an iphone 4s https://www.youtube.com/watch?v=P1e7ZCKQfMA
  • 3. Wednesday, July 17, 13 Tommy Edison, the Blind Film Critic, shows how he uses Instagram on an iphone 4s https://www.youtube.com/watch?v=P1e7ZCKQfMA
  • 4. 3 Factors Wednesday, July 17, 13 http://webaim.org/standards/wcag/checklist Here are three factors that make an application or web site accessible.
  • 5. Perceivable Wednesday, July 17, 13 All content that is presented visually must also be discoverable via a screen reader or other assistive technology.
  • 6. Wednesday, July 17, 13 This video shows Victor Tsaran trying to use an app that features a set of buttons that are not focusable. He’s frustrated by the inability to begin the process.
  • 7. Wednesday, July 17, 13 This video shows Victor Tsaran trying to use an app that features a set of buttons that are not focusable. He’s frustrated by the inability to begin the process.
  • 8. Operable Wednesday, July 17, 13 All user interactions must be clearly labeled and react to user’s gestures.
  • 9. Where’s the power button in this flashlight app? Wednesday, July 17, 13 This video shows how the Flashlight app has not included labels on the buttons. This makes the user randomly click on elements. When an image is used as a button and does not include an accessibilityLabel, VoiceOver will announce the image’s source, i.e. background dimmed
  • 10. Where’s the power button in this flashlight app? Wednesday, July 17, 13 This video shows how the Flashlight app has not included labels on the buttons. This makes the user randomly click on elements. When an image is used as a button and does not include an accessibilityLabel, VoiceOver will announce the image’s source, i.e. background dimmed
  • 11. Understandable Wednesday, July 17, 13 Content should be readable. Don’t hide important content within background images or treat complex information as a simple string.
  • 12. Flipboard FTW! •Labels •Distinct elements •Focus on new content Wednesday, July 17, 13 This video shows how the Flipboard app is easy to understand. The content and user interfaces are clearly labeled.
  • 13. Flipboard FTW! •Labels •Distinct elements •Focus on new content Wednesday, July 17, 13 This video shows how the Flipboard app is easy to understand. The content and user interfaces are clearly labeled.
  • 14. Screen Reader Wednesday, July 17, 13 Screen reader software, such as VoiceOver, TalkBack, or Narrator provide an interface between the user and the application. The SR interprets the user’s gestures and the application’s output. Gestures are unique to screen reader usage, this can be surprising for custom gestures that detect onTouch events.
  • 15. Go Native Wednesday, July 17, 13 native components already include appropriate focus behaviors. Use these and your application will inherit the accessibility. You will need to control focus whenever using custom elements. The iOS and Android platforms include focus control by default. In HTML, links and form elements natively receive focus.
  • 16. Wednesday, July 17, 13 The key elements for iOS accessibility are: •setting isAccessibilityElement •defining modal views •Grouping children •Announcing screen changes
  • 17. isAccessibilityElement Should an element receive focus? Wednesday, July 17, 13 this can be chosen via interface builder or programatically Make sure this is set to yes for actionable items. Set it to false on parent containers when their children are actionable, i.e. UITableViewCell http://developer.yahoo.com/blogs/ydn/defining-isaccessibilityelement-ios- application-53755.html
  • 18. photoSet.isAccessibilityElement =YES; Wednesday, July 17, 13 Typically you will not set isAccessibilityElement to true on a UITableView. But if you want this to act as a single actionable item, set this to true.
  • 19. photoSet.isAccessibilityElement = NO; photoSetRow.isAccessibilityElement =Yes; Wednesday, July 17, 13 this is the default behavior in iOS and you shouldn’t need to set these values.
  • 20. photoSet.isAccessibilityElement = NO; photoSetRow.isAccessibilityElement = NO; photoSetImage.isAccessibilityElement =YES; Wednesday, July 17, 13 If your UITableViewCell has actionable items, set the cell to NO and place YES on the individual images. This is also commonly seen when a Webview is given focus instead of the website within it.
  • 21. Wednesday, July 17, 13 This video shows a custom container that includes a date picker and button. The container has accessibility so the picker and button are not available to the user.
  • 22. Wednesday, July 17, 13 This video shows a custom container that includes a date picker and button. The container has accessibility so the picker and button are not available to the user.
  • 23. Modality accessibilityViewIsModal Wednesday, July 17, 13 accessibilityViewIsModal https://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIAccessibility_Protocol/Introduction/Introduction.html The default value for this property is NO. When the value of this property is YES, VoiceOver ignores the elements within the sibling views of the receiving view. For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to YES on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to YES on view C, VoiceOver does not ignore the elements in view A.
  • 24. Modality accessibilityViewIsModal Wednesday, July 17, 13 accessibilityViewIsModal https://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIAccessibility_Protocol/Introduction/Introduction.html The default value for this property is NO. When the value of this property is YES, VoiceOver ignores the elements within the sibling views of the receiving view. For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to YES on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if view B contains a child view C and you set accessibilityViewIsModal to YES on view C, VoiceOver does not ignore the elements in view A.
  • 25. Wednesday, July 17, 13 This short video shows how a modal window (the right panel) is not blocking elements that sit on a different layer. The user is confused by these extraneous buttons.
  • 26. Wednesday, July 17, 13 This short video shows how a modal window (the right panel) is not blocking elements that sit on a different layer. The user is confused by these extraneous buttons.
  • 27. shouldGroupAccessibilityChildren Wednesday, July 17, 13 VoiceOver will typically read elements in a left to right order. Use shouldGroupAccessibilityChildren to define a group of objects that are read in a vertical or other order. http://developer.apple.com/library/ios/#documentation/uikit/reference/ UIAccessibility_Protocol/Introduction/Introduction.html
  • 28. Statistics are announced as a string and then the labels. These should be read as pairs. Wednesday, July 17, 13 This video shows how the content is not understandable due to the lack of grouping.
  • 29. Statistics are announced as a string and then the labels. These should be read as pairs. Wednesday, July 17, 13 This video shows how the content is not understandable due to the lack of grouping.
  • 30. UIAccessibilityPostNotification Wednesday, July 17, 13 We need to let the user know when the screen is changing. Use UIAccessibilityPostNotification to announce the change. You can also move focus to the changed area, this is helpful for modals or dropdowns. https://developer.apple.com/library/ios/#featuredarticles/ViewControllerPGforiPhoneOS/ Accessibility/AccessibilityfromtheViewControllersPerspective.html#//apple_ref/doc/uid/ TP40007457-CH2-SW2
  • 31. UIAccessibilityPostNotification Wednesday, July 17, 13 We need to let the user know when the screen is changing. Use UIAccessibilityPostNotification to announce the change. You can also move focus to the changed area, this is helpful for modals or dropdowns. https://developer.apple.com/library/ios/#featuredarticles/ViewControllerPGforiPhoneOS/ Accessibility/AccessibilityfromtheViewControllersPerspective.html#//apple_ref/doc/uid/ TP40007457-CH2-SW2
  • 32. accessibilityLabel flashlightSwitch.accessibilityLabel = @”Turn on the light”; Wednesday, July 17, 13 Going back to the flashlight example, this is how the main button would receive a label.
  • 33. onTouchStart Wednesday, July 17, 13 custom gestures in JavaScript do not work with VoiceOver, as the single finger swipe is used as a key element in VoiceOver navigation. iOS7 introduces a single finger swipe to allow users to access the back button functionality. Depending on where the user begins their swipe, custom JavaScript carousels and other swipe based gestures may not work. ALWAYS include an alternate method for your swipe gestures, such as back and forward buttons photo: a morality play in one act by Cassidy Curtis
  • 34. Android Wednesday, July 17, 13 Android key elements: •android:focusable •exploreByTouchHelper class •onFocusChange •Grouping •Android Lint
  • 35. android:focusable • setFocusable() • isFocusable() • requestFocus() Wednesday, July 17, 13 Android allows you to define the elements that are focusable and actionable with android:focusable =”true” When android cannot find an element that is focusable, it will treat the parent as a single text string. http://developer.android.com/guide/topics/ui/accessibility/apps.html Focus can also be programmed.
  • 36. Wednesday, July 17, 13 This short video shows how an Android application should work. The user should be able to touch explore the statement and read each element uniquely.
  • 37. Wednesday, July 17, 13 This short video shows how an Android application should work. The user should be able to touch explore the statement and read each element uniquely.
  • 38. Wednesday, July 17, 13 In this video, the application has not set android:focusable on the bank statement. The entire set of transactions are announced as a single string.
  • 39. Wednesday, July 17, 13 In this video, the application has not set android:focusable on the bank statement. The entire set of transactions are announced as a single string.
  • 40. accessibilityNodeInfo • Define a custom element • Position • Description • Interaction • Children • Verbose code Wednesday, July 17, 13 http://developer.android.com/reference/android/view/accessibility/ AccessibilityNodeInfo.html AccessibilityNodeInfo allows developers to define how a customer view will be identified and its interactions. It’s a complex set of code and can be verbose.
  • 41. exploreByTouchHelper • Introduced at GoogleIO 2013 • Only 5 abstract methods • Wraps AccessibilityNodeProviderCompat • Very little documentation at this point Wednesday, July 17, 13 exploreByTouchHelper was introduced at GoogleIO 2013. This helper class makes custom elements much easier to build http://youtu.be/ld7kZRpMGb8?t=19m44s
  • 42. announceForAccessibilityCompat public void setCanvasColor(int color) { mCanvasColor = color; updateSummaryText(); invalidate(); // Provide feedback to users of accessibility // services that screen content has changed. announceForAccessibilityCompat(mContext.getString( R.string.announcement_canvas_color_changed, getNameForColor(color))); } Wednesday, July 17, 13 Announce screen changes with announceForAccessibilityCompat send a text string with new information, such as the color or subtotal Classes with ...Compat include backwards compatibility
  • 43. Wednesday, July 17, 13 Android provides a fast tool for finding errors in the code. This is especially useful for finding objects that need a content:description. https://www.youtube.com/watch?v=OtwCe-YlD5k
  • 44. Wednesday, July 17, 13 Android provides a fast tool for finding errors in the code. This is especially useful for finding objects that need a content:description. https://www.youtube.com/watch?v=OtwCe-YlD5k
  • 45. HTML5 Win8 FirefoxOS Wednesday, July 17, 13
  • 46. Native Components Links and Form Elements Wednesday, July 17, 13 Links and form elements automatically receive focus and pass events and states. divs, spans, images, lists, and other tags do not receive focus and events are not automatic.
  • 47. Wednesday, July 17, 13 This video shows how an iPhone reacts to different form types. This web page uses no javascript and only very simple CSS. Currently, the only form input type that is not given a special interface is the color picker. iOS6 on iPhone 4S web page can be viewed at http://fyvr.net/a11y/html5-form-types.html
  • 48. tabindex=”0 or -1” Wednesday, July 17, 13 tabindex=”0” allows an item, that normally does not receive focus, get keyboard focus. Use this when retro-fitting div-based buttons. Although it’s still better to use a button. tabindex=”-1” removes an item from the keyboard flow. However, the item can still receive focus via javascript. support for div based buttons without tabindex is available on mobile devices, but shouldn’t be counted on.
  • 49. .focus() Wednesday, July 17, 13
  • 50. .focus() Kitten Time Sleep in the sink fluffy fur run attack your ankles, faucibus sleep in the sink enim in viverra tail flick climb the curtains. Wednesday, July 17, 13
  • 51. .focus() Kitten Time Sleep in the sink fluffy fur run attack your ankles, faucibus sleep in the sink enim in viverra tail flick climb the curtains. <h3 tabindex=”-1”>Kitten Time</h3> Wednesday, July 17, 13
  • 52. Live Regions <div aria-live=”polite”> Subtotal: $12.50 </div> Wednesday, July 17, 13 Content that changes within a live region will be announced by the screen reader. Polite waits until the user has finished typing. Assertive will announce the change as soon as possible. http://tink.co.uk/2012/11/accessible-forms-with-aria-live-regions/
  • 53. Loading... Wednesday, July 17, 13 this video shows how hybrid apps can be confusing. Victor Tsaran is trying to use a phonegap based app that has a silent loading notification. He doesn’t know that it is loading and continues to explore the screen, causing an unexpected screen to load. Add role=”button” to links so they are announced as “button” instead of “link” Add aria-live=”assertive” to the loading image and make sure it has alt=”loading”
  • 54. Loading... Wednesday, July 17, 13 this video shows how hybrid apps can be confusing. Victor Tsaran is trying to use a phonegap based app that has a silent loading notification. He doesn’t know that it is loading and continues to explore the screen, causing an unexpected screen to load. Add role=”button” to links so they are announced as “button” instead of “link” Add aria-live=”assertive” to the loading image and make sure it has alt=”loading”
  • 55. Ted Drake w: last-child.com t: @ted_drake s: slideshare.net/7mary4 y: youtube.com/7mary4responding p: pinterest.com/teddrake j: intuit.com - Intuit’s hiring: Web, iOS, Android Thank you to Rebecca Greenberg and Victor Tsaran for video collaborations Wednesday, July 17, 13

×