Mobile Accessibility


Published on

This variation of an earlier mobile accessibility presentation was given to engineers at Intuit's Bangalore office. It has been updated with new information on Android, FirefoxOS, and Windows8

Published in: Design, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Mobile Accessibility Beach Cricket Tangalle By jjay69
  • India by wool By Cian O'Donova n
  • this child uses Proloque2Go to communicate with his parents. This app uses icons to build sentences and speak for the user. This replaces bulky, fragile equipment that can cost over $4,000 Toddler with apraxia Asking for Cheese and Cracker on Ipad with Proloquo2Go and ASL
  • Accessibility means removing barriers and giving people the tools they need to be independent. world’s first double backflip on a wheelchair by Aaron “Wheelz” Fotheringham 8-26-2010
  • Screen 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, form inputs, 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
  • Screen readers work like a tasty batch of Paani Puri. P aani Puri at Street Restaurant By Muy Yum
  • Screen readers, such as VoiceOver, TalkBack, and Narrator have three layers The application sits on the bottom. The screen reader sits on top of this, like the chickpeas. The tamarind syrup is the user. The screen reader interprets the input from tamarind and output of the puri. For automated testing, replace the tamarind with software that recreates a user’s expectations.
  • Braille is a tactile alphabet for reading. Refreshable braille displays allow users to interact with their mobile devices via bluetooth. iOS and Android’s Jellybean support braille output. photo: Kusum reading By J P Davidson
  • The direct interaction between finger and input has made mobile devices accessible to those with cognitive disabilities. Apps, such as schedule reminders, help those 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. Receta nº25: Chana masala By La cocinera diminuta
  • Operating a hand drill at Vultee-Nashville, woman is working on a "Vengeance" dive bomber, Tennessee (LOC) 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.
  • Taj Mahal in fog by Narreu Chameil T he following s lide is an interview with Karo Caran about using the iPad with low vision.
  • Mobile apps tend to focus on a single task per screen. Distracting browser elements, such as headers, ads, side navigation, etc are avoided. This helps users with ADD and cognitive disabilities. Simple problems used by Miss Gleason
  • Braille displays, single switches, and other alternative inputs can be enabled with mobile devices. Often times, the mobile device becomes the alternate input for other technology. iOS AssistiveTouch provides enhanced control of this functionality Labeled Light Switches by John Rambow
  • Photographing Alligators By The National Archives UK
  • Maharana Sajjan Singh (1874-1884) shoots at an apple By Asian Curator at The San Diego Museum of Art Accessi bility features are baked into every Apple d evice. VoiceOver is the core engine for translating user interactions between the app and the assistive technology.
  • VoiceOver is more than a screen reader. It’s a layer that acts as a middle layer between the user and app. It interprets gestures and content. It also can be used by automated testing to replace the user with scripts. Accessibility -> automated testing photo Amitabh Bachchan
  • Apple is now certifying hearing aids to provide digital audio experience and minimal radio interference some 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 language Hearing aids ads by Matthieu Aubry.
  • The Queens Silver Assistive touch allows the phone to be manipulated by external switches. It can also be used to remap the screen if the user is not able to press the home button.
  • Guided 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 on a single task and away from angry birds. Photo: Taj Mahal, Agra, India By
  • fortune telling robot by Paul Keller http:// developer.a de/topics/ui/accessibility/apps.html
  • Girl dressed like a bee 74% 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 app accessible fortunately helps all versions.
  • ICS introduced touch navigation, web view, voice input, and font resizing Photo: Big King By Meanest Indian
  • JB introduced gesture support and accessibility focus management, braille support, accessibility node APIs for custom views. Voice activated search is more powerful. JB 4.2.2 introduces ability to enable/disable Talkback without sighted assistance, read full screen, and three finger tap for zooming. Candy Stand By Shira Golding
  • This short video shows the accessibility improvements for Jelly Bean 4.2. These include zooming and TalkBack shortcut.
  • this menu appears after doing a down and to the right swipe while TalkBack is enabled. It allows you to quickly navigate a full page, pause talkback and more.
  • Narrator provides touch navigation and many gestures. Zooming is built in. Should be able to install NVDA or JAWS on tablets. Easy to enable/disable. Uses UI Automation as the accessibility layer photo: Cricket Scoreboard Number 8 By Leo Reynolds
  • Narrator is built in. Two modes: tablet and semi-traditional desktop JAWS and NVDA can be installed on the desktop Apps can be written in HTML5 via the .net framework multi-touch gesture support
  • This video shows how to enable Narrator with shortcut keys. It also shows how the basic gestures work. Unfortunately, it wasn’t as easy as you’d hope.
  • Accessibility features are being developed for the Firefox OS phone. It will have a JS based screen reader. Web Apps are the native apps. Build and test via Firefox. FireFox OS can be installed on some Android devices.
  • Audio, Video, HTML5 form types, ARIA, HTML5 web sites generally work well with mobile devices. Don’t overload with -webkit prefixes. Remember there will be other browsers (firefox, ie10) Bangalore Traffic by Ted Drake
  • Time to work photo: Kanyakumari construction workers by ruffin_ready
  • Every 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.
  • isAccessibility defines which elements are subject to focus. This is set by default for buttons and other actionable items. it needs to be configured with custom containers. Don’t set the parent to YES if there are actionable children.
  • This video shows the custom view used for a selector within Quickbooks Mobile. It’s the only thing that fails in this application.
  • Test your app by using a bluetooth keyboard. Can you access everything? Use the focus functions or set focusable at the layout level.
  • This video shows an android app that has not set focusable on the elements. The entire container is read as a single string.
  • Use 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 flow. the javascript for div will still need to recognize the onclick event, not mouse events.
  • set focus with JavaScript This 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 first link.
  • 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 photo: truck stop By Meanest In dian
  • Every non-standard button needs a label Make sure concatenated content includes all information and it is easily understood.
  • This 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.
  • accessibilityLabel : A string that succinctly identifies the accessibility element. accessibilityHint: A string that briefly describes the result of performing an action on the accessibility element. These can be set in Interface builder as well.
  • use contentDescription to provide labels for Android devices. use android:contentDescription = “@null”; for images that should be ignored. For EditText fields, provide an android: hint attribu te instead of a content description, to help users understand what content is expected when the text field is empty. When the field is filled, TalkBack reads the entered content to the user, instead of the hint text.
  • Use basic, semantic HTML first. title attribute on input can work if you want to hide the label aria-label works well when breaking up the text inputs aria-describedby points to a text container that describes the input, such as an error message.
  • When the user changes the quantity on this invoice, we want the user to know the subtitle has also changed. This is a common pattern where there are dynamic changes to a screen and we need to notify the user. This could also be for a dialog window, expanded menu, etc.
  • iOS6 allows you to notify a screen has changed, and place focus on that element. use  UIAccessibilityLayoutChangedNotification for small changes See WWDC 2012 Accessibility for iOS for the demo of this code 210
  • an AccessibilityEvent is created whenever you select an item or change focus in your UI. more info: use announceForAccessibilityCompat to get built in backwards compatibility Google has provided a great package of inaccessible/accessible code to learn more. https://code.googl
  • aria-live alerts the user when the content within the container’s value changes. Polite waits until the user pauses, assertive announces the change immediately. Fine tune with aria-atomic, aria-relevant, and aria-channel
  • photo: more by coun terclockwise
  • Your only option in 4.3 is to iterate the entire sub-tree setting isAccessibilityElement = NO
  • override accessibilityPerformEscape on custom back button The iPad does not use a standard back button in the top left of the screen. Allow the user to perform a scrub gesture to move back.
  • This information could be passed from the native app to webview if you need to provide alternate 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.
  • This video shows how to use the Android Lint tool to find accessibility problems and fix them quickly. on YouTube:
  • Tell users when you make an improvement to accessibility in your release notes. Preferably what part was fixed. They want to know when things are better and will tell their friends. photo: A man hides in an elephant skin and is carried off by a giant simurgh By Asian Curator at The San Diego Museum of Art
  • Woman reading The following slides will show how to enable screen reader on iOS and Android
  • Open settings. Choose General Scroll down to Accessibility
  • Scroll down and select Triple-click Home Choose VoiceOver and go back to Accessibility Settings Explore the accessibility options Now you can triple click the home button to enable disable VoiceOver. Victor Tsaran provides a good intro to using VoiceOver
  • Open Settings Select Accessibility Select TalkBack
  • select the on/off switch and choose ok Go back to Accessibility and choose Install web scripts (ICS) or Enhance Web Accessibility (Jelly Bean)
  • I am always available for questions and advice. Do not hesitate to send emails with questions, I will try to answer, possibly with sample code, as soon as possible. Follow me on twitter and slideshare
  • Mobile Accessibility

    1. 1. ಮೊಬೈಲ್ ಪ್ರವೇಶTed Drake, Intuit AccessibilityBengaluru, 2013
    2. 2. • This• Photos from Flickr viaCreative Commons licensing• Accessible version of
    3. 3. What is Mobile Accessibility?
    4. 4. Screen Reader
    5. 5. PuriPuriChickpeasChickpeasTamarindTamarindPuri Readers
    6. 6. Braille
    7. 7. Cognitive Disabilities
    8. 8. Low Vision
    9. 9. QuickTime™ and aH.264 decompressorare needed to see this picture.
    10. 10. Alternate Inputs
    11. 11. HTML5HTML5
    12. 12. iOS
    13. 13. VoiceOver
    14. 14. Hearing
    15. 15. Guided Access
    16. 16. AndroidANDROID
    17. 17. BeforeIce CreamSandwichIce CreamSandwich
    18. 18. Ice Cream Sandwich
    19. 19. Jelly Bean
    20. 20. Global Context Menu
    21. 21. Windows 8• Windows 8 components are accessible• Essentially HTML5 wrappers• Extensive gesture support• Verbose feedback on elements
    22. 22. Windows 8Phone• Narrator is not available• High contrast setting• Screen magnifier• Text zoom• Talking caller ID• Speech commands
    23. 23. Surface andWindows 8Desktop
    24. 24. FireFox OS• HTML5 apps and OS• Open Source• Future: screen reader,zoom• Build and test now withemulator or build withAndroid device
    25. 25. Mobile Web
    26. 26. ಕೆಲಸ ಮಾಡಲುಸಮಯ
    27. 27. Focus Control
    28. 28. iOSisAccessibilityElement// if a UIView implements the containerprotocol, it cannot be an accessibleelement- (BOOL)isAccessibilityElement{return NO;}
    29. 29. QuickTime™ and aH.264 decompressorare needed to see this picture.
    30. 30. AndroidsetFocusable() | isFocusable() | requestFocus()setFocusable() | isFocusable() | requestFocus()<RelativeLayoutandroid:id="@+id/row_type"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_margin="2dp"android:focusable="true" >
    31. 31. QuickTime™ and aH.264 decompressorare needed to see this picture.Unfocused Content
    32. 32. ExploreByTouchHelper• Introduced at Google IO 2013• Helper class that makes it easy to createaccessible custom views• Provides dimensions, locations, text, andaction• Re-use classes from visual design
    33. 33. HTML5<a> & <button><a> & <button>Best:<button>Share This</button>Good:<a href=”#sharethis” role=”button”>ShareThis</a>Works, but avoid:<div role=”button” tabindex=”0”>ShareThis</div>
    34. 34. <div id="cb" role="checkbox"> Spam</div>var checkbox =document.getElementById(cb);checkbox.tabIndex = 0; // make the divfocusablecheckbox.focus();HTMLfocus()focus()
    35. 35. Don’t Touch•touchstart•touchend•touchmove•touchcancel
    36. 36. Labels and Descriptions
    37. 37. Custom Buttons
    38. 38. iOSaccessibilityLabel | accessibilityHintaccessibilityLabel | accessibilityHintquantity.accessibilityLabel =@”Quantity”;quantity.accessibilityHint =@”Increase desired quantity.”;
    39. 39. AndroidcontentDescriptioncontentDescription<ImageViewandroid: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" />
    40. 40. HTML<img alt=”GoPayment” ...><label for=”name”>Name</label><input title=”Search”...><input aria-label=”Area Code”aria-describedby=”phoneError” ...>
    41. 41. DynamicValues
    42. 42. iOSUIAccessibilityPostNotificationUIAccessibilityPostNotification-(void)helpDidClose:(ZBEHelpView *)view{[helpView removeFromSuperview];helpView = nil;[self unease];UIAccessibilityPostNotification (UIAccessibilityScreenChangedNotification,statusView);// statusView instead of nil tells this where toplace the focus.}
    43. 43. AndroidAccessibilityEventprivate 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);}
    44. 44. HTMLaria-livearia-live<div aria-live=”polite”>Total is $5.10</div>
    45. 45. More Stuff
    46. 46. accessibilityViewIsModal (iOS5)A Boolean value indicating whether VoiceOver should ignorethe elements within views that are siblings of the receiver.
    47. 47. accessibilityPerformEscapeImplement this method on an element orcontaining view that can be revealedmodally or in a hierarchy. When aVoiceOver user performs a dismiss action,this method dismisses the view. thepopover.
    48. 48. Detect Screen ReaderiOSUIAccessibilityIsVoiceOverRunning();AndroidisScreenReaderActive()
    49. 49. QuickTime™ and aH.264 decompressorare needed to see this picture.
    50. 50. Don’t Hide Your Fixes
    51. 51. Ted DRAKESr. Accessibility EngineerIntuit Accessibility, CTOted_drake@intuit.comh: last-child.comt: @ted_drakes: