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/

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