Your SlideShare is downloading. ×

iOS 7 Accessibility

4,681

Published on

This presentation was created for the Mobile+Web DevCon in San Francisco Jan, 2014. The presentation is aimed at developers, it introduces accessibility and is meant to show what is possible while …

This presentation was created for the Mobile+Web DevCon in San Francisco Jan, 2014. The presentation is aimed at developers, it introduces accessibility and is meant to show what is possible while developing applications. It covers: Dynamic Type, Safari Viewport, Simplification, Blur and Low Contrast, Switch Control, Guided Access, Speech Synthesis, Hand Writing, and Magic Tap (iOS6).

View this in accessible HTML: http://www.last-child.com/ios7-accessibility/

Published in: Technology, Design
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
4,681
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
15
Comments
1
Likes
1
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. iOS7 Accessibility Ted Drake, Intuit Friday, January 24, 14 This presentation was created for the Mobile+Web Developer Conference in San Francisco, Jan. 2014
  • 2. What is accessibility? Friday, January 24, 14
  • 3. Friday, January 24, 14 This short video by Tommy Edison shows how accessible applications are used by screen reader users. In this instance, he is able to quickly take a photo and share it on Instagram. https://www.youtube.com/watch?v=P1e7ZCKQfMA
  • 4. Friday, January 24, 14 This short video by Tommy Edison shows how accessible applications are used by screen reader users. In this instance, he is able to quickly take a photo and share it on Instagram. https://www.youtube.com/watch?v=P1e7ZCKQfMA
  • 5. Screen Reader Friday, January 24, 14 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.
  • 6. Friday, January 24, 14 typically a user interacts directly with the phone
  • 7. VoiceOver Friday, January 24, 14 With VoiceOver and other screen readers, the user interacts with VoiceOver. VoiceOver interprets the user’s input and passes it to the application. The application returns a result, which is passed back to the user in their preferred output, such as voice.
  • 8. VoiceOver Automated Testing Friday, January 24, 14 VoiceOver doesn’t care who the user is. You can even use it to run automated testing. VoiceOver is your programable tool to the application’s functionality.
  • 9. Siri: Turn on VoiceOver Friday, January 24, 14 VoiceOver is very easy to use. Simply ask Siri to turn on voiceover. You can also ask her to turn it off. For quicker access, go into settings>general>accessibility>accessibility shortcut and select
  • 10. Focus & Double Tap Friday, January 24, 14 VoiceOver’s gestures are quite simple, swipe with one finger to move from element to element. Use touch exploration to discover what is on a screen. VoiceOver will announce what has been focused. Double tap to activate whatever is focused. Learn more with a four finger double tap
  • 11. Focus & Double Tap Friday, January 24, 14 VoiceOver’s gestures are quite simple, swipe with one finger to move from element to element. Use touch exploration to discover what is on a screen. VoiceOver will announce what has been focused. Double tap to activate whatever is focused. Learn more with a four finger double tap
  • 12. What’s new in iOS7 • • • • • • • • • Friday, January 24, 14 Dynamic Type Safari Viewport Simplification Blur and Low Contrast Switch Control Guided Access Speech Synthesis Hand Writing Magic Tap (iOS6)
  • 13. mic na Dy Type Friday, January 24, 14 Dynamic Type is part of UIFont. Choose the purpose of your text and allow iOS to control its proportional size. For instance, choose heading, body, table cell Headline, SubHeadline, Body, Footnote, Caption1, Caption2
  • 14. Dynamic Type message.label.font = [UIFont preferredFontForTextStyle: UIFontTextStyleHeadline ]; Friday, January 24, 14 https://www.captechconsulting.com/blog/john-szumski/ios-7-tutorial-series-dynamic-type self.label.font = [UIFont preferredFontForTextStyle:UIFontTextStyleHeadline]; listen for the font size change, this allows the type to be resized when the user changes their preference. https://developer.apple.com/library/ios/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/CustomTextProcessing/ CustomTextProcessing.html#//apple_ref/doc/uid/TP40009542-CH4-SW65
  • 15. Safari Viewport Good: <meta name="viewport" content="width=device-width"> Bad: <meta name="viewport" content="initial-scale=2.3, user-scalable=no"> Friday, January 24, 14 Safari for iOS7 has a different layout and treats the viewport differently. You don’t need to disable user-scalable. Just use the basic viewport settings. https://developer.apple.com/library/ios/DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
  • 16. Simplification Friday, January 24, 14 Replace buttons with text = good thing Replacing buttons with icons = some good, some bad Be consistent, don’t re-invent the icons. Give icons a label.
  • 17. Friday, January 24, 14 Thin fonts on blurred backgrounds can make your text unreadable for all users, let alone those with low vision. Consider using system fonts to allow user settings. Consider how your text will look with a light and dark background. 4.5:1 is the required ratio for contrast. Does your tint color provide this? https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/MobileHIG/ColorImagesText.html#//apple_ref/ doc/uid/TP40006556-CH58-SW1
  • 18. 4.5:1 Friday, January 24, 14 Thin fonts on blurred backgrounds can make your text unreadable for all users, let alone those with low vision. Consider using system fonts to allow user settings. Consider how your text will look with a light and dark background. 4.5:1 is the required ratio for contrast. Does your tint color provide this? https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/MobileHIG/ColorImagesText.html#//apple_ref/ doc/uid/TP40006556-CH58-SW1
  • 19. Switch Control Switch Control Friday, January 24, 14 iOS7 introduced Switch Control, which provides an interface to all elements of a page, using just a single tap on the phone or external switch. It can also track head movements. Switch Control can also be used to see what elements in your application receive focus. Stephen Hawking NASA 50th photo by NASA http://www.flickr.com/photos/nasahqphoto/3462939589/
  • 20. Guided Access Friday, January 24, 14 G.A. started as a method for care givers to disable sections of applications and devices for people with autism, ADD, and other cognitive disabilities. It is now available to developers. You define roles and the availability of elements within those roles. for example, only show a delete button for editors. Only show options available for a location, i.e. Clover brewing at Starbucks. https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIGuidedAccessRestrictionsDelegate_Protocol/ Reference/Reference.html Custom restrictions are represented by string identifiers provided by the developer in the guidedAccessRestrictionIdentifiers method Photo: access denied by Notanotherusername! http://www.flickr.com/photos/s8an/5489233419/
  • 21. Guided Access API - (NSArray *)guidedAccessRestrictionIdentifiers { return @[ ControlsRestrictionId ]; } - (NSString *)textForGuidedAccessRestrictionWithIdentifier: (NSString *)restrictionId { return @”Controls”; } - (NSString *)detailTextForGuidedAccessRestrictionWithIdentifier: (NSString *)restrictionId { return @”Adjust floor down/up”; } Friday, January 24, 14 This sample code comes from the WWDC 2013 presentation: Accessibility in iOS https://developer.apple.com/wwdc/videos/index.php?id=202
  • 22. Speech Synthesis AVSpeechSynthesizer Friday, January 24, 14 The AVSpeechSynthesizer class produces synthesized speech from text on an iOS device, and provides methods for controlling or monitoring the progress of ongoing speech. Access text to speech engine, also can define language and monitor the status. Use this to create a speech option on your pages for non VoiceOver users. https://developer.apple.com/library/ios/documentation/AVFoundation/Reference/AVSpeechSynthesizer_Ref/Reference/Reference.html photo: speech bubbles at Erg by Topsy http://www.flickr.com/photos/wygd/265888499/
  • 23. Text to Speech API AVSpeechSynthesizer *synthesizer = [[AVSpeechSynthesizer alloc] init]; AVSpeechUtterance *utterance = [AVSpeechUtteranceWithString: @"Hello!"]; [speechSynth speakUtterance:utterance]; Friday, January 24, 14
  • 24. Friday, January 24, 14 This short video shows how to choose the handwriting option and open the starbucks app by writing the letters “st” on the screen. Handwriting can also be used to write text within text inputs. Watch for this to be expanded in ios8 for all users. http://www.applevis.com/podcast/episodes/activating-accessing-and-using-handwritingmode-ios-7
  • 25. Friday, January 24, 14 This short video shows how to choose the handwriting option and open the starbucks app by writing the letters “st” on the screen. Handwriting can also be used to write text within text inputs. Watch for this to be expanded in ios8 for all users. http://www.applevis.com/podcast/episodes/activating-accessing-and-using-handwritingmode-ios-7
  • 26. Magic Tap - (BOOL)accessibilityPerformMagicTap Two-fingered double tap activates the key function on the screen. •Take photo •Start stopwatch •Hangup phone call Friday, January 24, 14 The exact action performed by this method depends your app, typically toggling the most important state of the app. For example, in the Phone app it answers and ends phone calls, in the Music app it plays and pauses playback, in the Clock app it starts and stops a timer, and in the Camera app it takes a picture. photo: magic tap by ozz13x http://www.flickr.com/photos/24931020@N02/7590427782/
  • 27. isAccessibilityElement Should an element receive focus? Friday, January 24, 14 this can be chosen via interface builder or programmatically 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-iosapplication-53755.html This is important for all VoiceOver and Switch Control users.
  • 28. Friday, January 24, 14 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.
  • 29. Friday, January 24, 14 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.
  • 30. photoSet.isAccessibilityElement = YES; Friday, January 24, 14 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.
  • 31. photoSet.isAccessibilityElement = NO; photoSetRow.isAccessibilityElement = Yes; Friday, January 24, 14 this is the default behavior in iOS and you shouldn’t need to set these values.
  • 32. photoSet.isAccessibilityElement = NO; photoSetRow.isAccessibilityElement = NO; photoSetImage.isAccessibilityElement = YES; Friday, January 24, 14 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.
  • 33. 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 Friday, January 24, 14

×