Top Banner

Click here to load reader

Mobile Accessibility - Accessibility Camp Toronto

May 08, 2015




This presentation is similar to the version I gave at Silicon Valley Code Camp that can also be seen on Slideshare. This version introduced videos for Android 4.2 and Surface.


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

2. This presentation: 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 ReadersGravyCurdsTatersSaturday, 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 users expectations. 6. BrailleSaturday, November 17, 12Young woman and man braille reading on park bench is a tactile alphabet for reading. Refreshable braille displays allow users to interactwith their mobile devices via bluetooth. iOS and Androids 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. LowVisionSaturday, November 17, 12Ice mask, C.T. Madigan, between 1911-1914 / photograph by Frank Hurley 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,000 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,000 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 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. Its 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. - 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 Display 20. BeforeIce CreamSandwichSaturday, November 17, 12 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 - introduced touch navigation, web view, voice input, and font resizing 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. 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. 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 layer 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 wasnt as easy as youd hope. 26. Mobile WebSaturday, November 17, 12Audio, Video, HTML5 form types, ARIA,HTML5 web sites generally work well with mobile devices.Dont overload with -webkit prexes. 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. iOSisAccessibilityElement// if a UIView implements the containerprotocol, it cannot be an accessibleelement- (BOOL)isAccessibilityElement{ return NO;}Saturday, November 17, 12isAccessibility denes which elements are subject to focus. This is set by default for buttonsand other actionable items. it needs to be congured with custom containers.Dont set the parent to YES if there are actionable children. 30. Saturday, November 17, 12This video shows the custom view used for a selector within Quickbooks Mobile. Its the onlything that fails in this application. 31. Saturday, November 17, 12This video shows the custom view used for a selector within Quickbooks Mobile. Its the onlything that fails in this application. 32. Android setFocusable() | isFocusable() | requestFocus()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 & Best:Share ThisGood:ShareThisWorks, but avoid:


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()


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. Dont 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 ngers 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 acr

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.