Mobile Accessibility - Accessibility Camp Toronto

1. Mobile Accessibility Accessibility Camp - Toronto, 2012 Ted Drake, Intuit AccessibilitySaturday, November 17, 12Hurdle race on snowshoes, Montreal, QC, 1892

2. • This presentation: Slideshare.net/7mary4 • Photos from Flickr CommonsSaturday, November 17, 12Wrestlers, McGill boxing, wrestling and fencing club, Montreal, 1925

3. Screen ReaderSaturday, November 17, 12Screen readers are more than a text to speech engine.They analyze the page/screen and create their own version of the structure. which allows the user to navigate via headers, forminputs, landmarks, etc.Popular screen readers are Narrator for windows 8, VoiceOver for Mac, TalkBack and ChromeVox for Android.JAWS and NVDA are for windows desktop and should be available for Win8 mobile tablet.Plastic sneeuwstormbeschermer / Face protection from snowstorms

4. Saturday, November 17, 12Screen readers work like a tasty batch of Poutine.Poutine!

5. Poutine Readers Gravy Curds TatersSaturday, November 17, 12Screen readers, such as VoiceOver, TalkBack, and Narrator have three layersThe application sits on the bottom. The screen reader sits on top of this, like the curds. Thegravy is the user.The screen reader interprets the input from gravy and output of the taters.For automated testing, replace the gravy with software that recreates a user’s expectations.

6. BrailleSaturday, November 17, 12Young woman and man braille reading on park bench http://www.ﬂickr.com/photos/center_for_jewish_history/4926954971/Braille is a tactile alphabet for reading. Refreshable braille displays allow users to interactwith their mobile devices via bluetooth. iOS and Android’s Jellybean support braille output.

7. Cognitive DisabilitiesSaturday, November 17, 12The direct interaction between ﬁnger and input has made mobile devices accessible to those with cognitive disabilities. Apps, such as schedule reminders, helpthose with memory loss due to traumatic brain injury.Guided Access for iOS6 allows the user to focus on using only one app at a time. Good for ADD and cognitive disabilities.Mobile apps in general are more focused and task oriented."Old Woman in a Shoe", from the Mother Goose Nursery Rhymes, Montreal, 1866-67

8. Low VisionSaturday, November 17, 12Ice mask, C.T. Madigan, between 1911-1914 / photograph by Frank Hurley http://www.ﬂickr.com/photos/statelibraryofnsw/2963668712/The following slide is an interview with Karo Caran about using the iPad with low vision.

9. Saturday, November 17, 12

10. Saturday, November 17, 12

11. Assistive CommunicationSaturday, November 17, 12this child uses Proloque2Go to communicate with his parents. This app uses icons to buildsentences and speak for the user. This replaces bulky, fragile equipment that can cost over$4,000http://www.youtube.com/watch?v=Tp2ROyyyqjo Toddler with apraxia Asking for Cheese and Cracker on Ipad with Proloquo2Go and ASL

12. Assistive CommunicationSaturday, November 17, 12this child uses Proloque2Go to communicate with his parents. This app uses icons to buildsentences and speak for the user. This replaces bulky, fragile equipment that can cost over$4,000http://www.youtube.com/watch?v=Tp2ROyyyqjo Toddler with apraxia Asking for Cheese and Cracker on Ipad with Proloquo2Go and ASL

13. Alternate InputsSaturday, November 17, 12Braille displays, single switches, and other alternative inputs can be enabled with mobile devices. Often times, themobile device becomes the alternate input for other technology. iOS AssistiveTouch provides enhanced control ofthis functionalityHigh skates, copied for Captain J. Miner, 1870

14. iOS - Android - Win8 - HTML5Saturday, November 17, 12Gymnastic group, Trafalgar School, Montreal, QC, 1933-35

15. iOSSaturday, November 17, 12LSE Sports Day, Apple Bobbing, May 1932 http://www.ﬂickr.com/photos/lselibrary/4166786914/Accessibility features are baked into every Apple device. VoiceOver is the core engine for translating user interactions between the app and the assistivetechnology.

16. VoiceOverSaturday, November 17, 12VoiceOver is more than a screen reader. It’s a layer that acts as a middle layer between the user and app. It interprets gestures andcontent.It also can be used by automated testing to replace the user with scripts. Accessibility -> automated testingErik Bye og Otto Nilsen i radio studio 13. mars 1958. - http://www.ﬂickr.com/photos/national_archives_of_norway/5476890757/

17. HearingSaturday, November 17, 12Apple is now certifying hearing aids to provide digital audio experience and minimal radio interferencesome apps are now using the phone to detect sound and act as “ears” for users.Skype, face to face and other apps allow people to communicate via sign languageRoyal Bank Branch, Notre Dame Street, Montreal, QC, 1911

18. Guided AccessSaturday, November 17, 12Guided Access allows the user to close off certain parts of apps to minimize distractions. This is useful for autism, ADD, and classrooms to keep people focused ona single task and away from angry birds.Snowshoeing Indian ﬁle, Mount Royal, Montreal, QC, 1879

19. AndroidSaturday, November 17, 12Department Store Toy Displayhttp://developer.android.com/guide/topics/ui/accessibility/apps.html

20. Before Ice Cream SandwichSaturday, November 17, 12http://www.ﬂickr.com/photos/ﬁeld_museum_library/3405449492/in/photostream/ Girl dressed like a bee74% of users are still on pre-ICS phones.Honeycomb and other pre-ICS versions have minimal accessibility support. DPad focus control is critical. Making your appaccessible fortunately helps all versions.

21. Ice Cream SandwichSaturday, November 17, 12Members of the Donald Dannheim Family Who Operate a Dairy and Ice Cream Store - http://www.ﬂickr.com/photos/usnationalarchives/4727559500/ICS introduced touch navigation, web view, voice input, and font resizinghttp://developer.android.com/about/versions/android-4.0-highlights.html

22. Jelly BeanSaturday, November 17, 12JB introduced gesture support and accessibility focus management, braille support, accessibility node APIs for custom views.Voice activated search is more powerful. http://developer.android.com/about/versions/jelly-bean.htmlJB 4.2.2 introduces ability to enable/disable Talkback without sighted assistance, read full screen, and three ﬁnger tap forzooming.Two ladies in swimming costumes in the "Greasy Pole" competition aboard the Empress of Canada

23. Saturday, November 17, 12This short video shows the accessibility improvements for Jelly Bean 4.2.These include zooming and TalkBack shortcut.http://www.youtube.com/watch?v=LEQHyc3NMGc

24. Windows 8Saturday, November 17, 12Narrator provides touch navigation and many gestures. Zooming is built in. Should be able to install NVDA or JAWSon tablets. Easy to enable/disable.Uses UI Automation as the accessibility layerhttp://windows.microsoft.com/en-US/windows-8/hear-text-read-aloud-with-narratorGymnastic group, Montreal, QC, 1891

25. Saturday, November 17, 12This video shows how to enable Narrator with shortcut keys. It also shows how the basicgestures work.Unfortunately, it wasn’t as easy as you’d hope.

26. Mobile WebSaturday, November 17, 12Audio, Video, HTML5 form types, ARIA,HTML5 web sites generally work well with mobile devices.Don’t overload with -webkit preﬁxes. Remember there will be other browsers (ﬁrefox, ie10)Expo 67

27. Get To WorkSaturday, November 17, 12Unloading S.S "Durham City", Montreal, QC, 1896

28. Focus ControlSaturday, November 17, 12Every action item in your app must be focusable and clickable.Flickr photo app for iOS. Currently the rows are focusable, but not the individual thumbnails.

29. iOS isAccessibilityElement // if a UIView implements the container protocol, it cannot be an accessible element - (BOOL)isAccessibilityElement { return NO; }Saturday, November 17, 12isAccessibility deﬁnes which elements are subject to focus. This is set by default for buttonsand other actionable items. it needs to be conﬁgured with custom containers.Don’t set the parent to YES if there are actionable children.http://yaccessibilityblog.com/library/isaccessibility-ios-app.html

30. Saturday, November 17, 12This video shows the custom view used for a selector within Quickbooks Mobile. It’s the onlything that fails in this application.

31. Saturday, November 17, 12This video shows the custom view used for a selector within Quickbooks Mobile. It’s the onlything that fails in this application.

32. Android setFocusable() | isFocusable() | requestFocus() <RelativeLayout android:id="@+id/row_type" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="2dp" android:focusable="true" >Saturday, November 17, 12Test your app by using a bluetooth keyboard. Can you access everything?Use the focus functions or set focusable at the layout level.

33. Unfocused ContentSaturday, November 17, 12This video shows an android app that has not set focusable on the elements. The entirecontainer is read as a single string.

34. HTML5 <a> & <button> Best: <button>Share This</button> Good: <a href=”#sharethis” role=”button”>Share This</a> Works, but avoid: <div role=”button” tabindex=”0”>Share This</div>Saturday, November 17, 12Use the a for links. Use button for actions.use role=”button” if you need to use a link to trigger an action.use tabindex=”0” on non-links or buttons, such as a div.tabindex=”-1” allows an item to receive focus via JS, but is not in the normal tab ﬂow.the javascript for div will still need to recognize the onclick event, not mouse events.

35. HTML focus() <div id="cb" role="checkbox"> Spam</div> var checkbox = document.getElementById(cb); checkbox.tabIndex = 0; // make the div focusable checkbox.focus();Saturday, November 17, 12set focus with JavaScriptThis is the same approach needed to let the user know a portion of the screen has changed.For instance, if a dropdown menu appears, place focus on the ﬁrst link.

36. Don’t Touch •touchstart •touchend •touchmove •touchcancelSaturday, November 17, 12 • Screen readers intercept the touch events. You cannot depend on these events. You must provide alternate buttons. • JellyBean theoretically works by letting two fingers be interpreted as a single touch • iOS provides a gesture event, but it is not supported on other devices. • Finger is placed on the screen • Finger is removed from the screen • Finger is moved across the screen • Touch is cancelled before the finger is actually removed from the screen • Kersthazen voor verkeersagent http://www.flickr.com/photos/nationaalarchief/3118323158/

37. Labels and DescriptionsSaturday, November 17, 12Every non-standard button needs a labelMake sure concatenated content includes all information and it is easily understood.

38. Custom ButtonsSaturday, November 17, 12This short video shows how the buttons are not labeled on the Southwest Airlines app. Sadly,this video is almost two years old and the app is still missing labels.http://www.youtube.com/watch?v=StI0iIufJzk

39. Custom ButtonsSaturday, November 17, 12This short video shows how the buttons are not labeled on the Southwest Airlines app. Sadly,this video is almost two years old and the app is still missing labels.http://www.youtube.com/watch?v=StI0iIufJzk

40. iOS accessibilityLabel | accessibilityHint quantity.accessibilityLabel = @”Quantity”; quantity.accessibilityHint = @”Increase desired quantity.”;Saturday, November 17, 12accessibilityLabel : A string that succinctly identiﬁes the accessibility element.accessibilityHint: A string that brieﬂy describes the result of performing an action on the accessibility element.These can be set in Interface builder as well.https://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIAccessibilityElement_Class/Reference/Reference.html

41. Android contentDescription <ImageView android:id="@+id/local_deals" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" android:contentDescription= "@string/local_deals" android:focusable="true" android:src="@drawable/ic_menu_local" />Saturday, November 17, 12use contentDescription to provide labels for Android devices.use android:contentDescription = “@null”; for images that should be ignored.For EditText fields, provide an android:hint attribute instead of a content description, to help users understand what content is expectedwhen the text field is empty. When the field is filled, TalkBack reads the entered content to the user, instead of the hint text.

42. HTML <img alt=”GoPayment” ...> <label for=”name”>Name</label> <input title=”Search”...> <input aria-label=”Area Code” aria-describedby=”phoneError” ...>Saturday, November 17, 12Use basic, semantic HTML ﬁrst.title attribute on input can work if you want to hide the labelaria-label works well when breaking up the text inputsaria-describedby points to a text container that describes the input, such as an errormessage.

43. Dynamic ValuesSaturday, November 17, 12When the user changes the quantity on this invoice, we want the user to know the subtitlehas also changed. This is a common pattern where there are dynamic changes to a screenand we need to notify the user. This could also be for a dialog window, expanded menu, etc.

44. iOS UIAccessibilityPostNotiﬁcation -(void)helpDidClose:(ZBEHelpView *)view { [helpView removeFromSuperview]; helpView = nil; [self unease]; UIAccessibilityPostNotification ( UIAccessibilityScreenChangedNotification, statusView); // statusView instead of nil tells this where to place the focus. }Saturday, November 17, 12iOS6 allows you to notify a screen has changed, and place focus on that element.use UIAccessibilityLayoutChangedNotification for small changesSee WWDC 2012 Accessibility for iOS for the demo of this code https://developer.apple.com/videos/wwdc/2012/#210

45. Android AccessibilityEvent private void announceForAccessibilityCompat(CharSequence text) { if (!mA11yManager.isEnabled()) { return; } final int eventType; if (Build.VERSION.SDK_INT < 16) { eventType = AccessibilityEvent.TYPE_VIEW_FOCUSED; } else { eventType = AccessibilityEventCompat.TYPE_ANNOUNCEMENT; } final AccessibilityEvent event = AccessibilityEvent.obtain(eventType); event.getText().add(text); event.setClassName(AccessibleCanvas.class.getName()); event.setPackageName(mContext.getPackageName()); mA11yManager.sendAccessibilityEvent(event); }Saturday, November 17, 12an AccessibilityEvent is created whenever you select an item or change focus in your UI.more info: http://developer.android.com/training/accessibility/accessible-app.html#eventsuse announceForAccessibilityCompat to get built in backwards compatibilityGoogle has provided a great package of inaccessible/accessible code to learn more.https://code.google.com/p/eyes-‐free/downloads/detail?name=accessibility_codelab_demos_v2_src.zip

46. HTML aria-live <div aria-live=”polite”> Total is $5.10 </div>Saturday, November 17, 12aria-live alerts the user when the content within the container’s value changes. Polite waitsuntil the user pauses, assertive announces the change immediately.Fine tune with aria-atomic, aria-relevant, and aria-channelhttp://lists.w3.org/Archives/Public/www-archive/2008May/att-0031/WAI-ARIA_Best_Practices_StructNav.html#LiveRegions

47. More StuffSaturday, November 17, 12Missie Harriet Frothingham and drum, Montreal, QC, 1867

48. accessibilityViewIsModal (iOS5) A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.Saturday, November 17, 12https://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIAccessibility_Protocol/Introduction/Introduction.html#//apple_ref/doc/uid/TP40008786Your only option in 4.3 is to iterate the entire sub-tree setting isAccessibilityElement = NO

49. accessibilityPerformEscape Implement this method on an element or containing view that can be revealed modally or in a hierarchy. When a VoiceOver user performs a dismiss action, this method dismisses the view. the popover.Saturday, November 17, 12https://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIAccessibilityAction_Protocol/Introduction/Introduction.htmloverride accessibilityPerformEscape on custom back buttonThe iPad does not use a standard back button in the top left of the screen. Allow the user toperform a scrub gesture to move back.

50. Detect Screen Reader iOS UIAccessibilityIsVoiceOverRunning(); Android isScreenReaderActive()Saturday, November 17, 12This information could be passed from the native app to webview if you need to providealternate content.This is helpful for skipping annoying gesture introduction screens.This is NOT possible in desktop browsers.You can also test for closed captions are enabled or mono audio.http://code.google.com/p/eyes-free/source/browse/trunk/shell/src/com/google/marvin/shell/HomeLauncher.java?spec=svn623&r=623https://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIKitFunctionReference/Reference/reference.html#//apple_ref/c/func/UIAccessibilityIsVoiceOverRunning

51. Saturday, November 17, 12This video shows how to use the Android Lint tool to ﬁnd accessibility problems and ﬁx themquickly.on YouTube: http://youtu.be/OtwCe-YlD5k

52. Don’t Hide Your FixesSaturday, November 17, 12Tell users when you make an improvement to accessibility in your release notes. Preferablywhat part was ﬁxed. They want to know when things are better and will tell their friends.Ice cased Adelie penguins after a blizzard at Cape Denison / photograph by Frank Hurley http://www.ﬂickr.com/photos/statelibraryofnsw/2960116125/

53. Turn on the screen readerSaturday, November 17, 12Woman reading http://www.ﬂickr.com/photos/nationalmediamuseum/2780164461/The following slides will show how to enable screen reader on iOS and Android

54. Enable VoiceOverSaturday, November 17, 12Open settings.Choose GeneralScroll down to Accessibility

55. Enable VoiceOverSaturday, November 17, 12Scroll down and select Triple-click HomeChoose VoiceOver and go back to Accessibility SettingsExplore the accessibility optionsNow you can triple click the home button to enable disable VoiceOver.Victor Tsaran provides a good intro to using VoiceOver http://www.youtube.com/watch?v=t60voPIY5xY

56. Enable TalkBackSaturday, November 17, 12Open SettingsSelect AccessibilitySelect TalkBack

57. Enable TalkBackSaturday, November 17, 12select the on/off switch and choose okGo back to Accessibility and choose Install web scripts (ICS) or Enhance Web Accessibility(Jelly Bean)

58. Ted Drake @ted_drake Last-Child.comSaturday, November 17, 12