This presentation for the Accessibility Camp Bay Area introduces the new accessibility features of iOS7 and how they can be used for mobile developers. It also highlights key elements of the iOS 7.1 release that can affect accessibility. This is similar to a presentation I gave at Mobile+Web conference,http://www.slideshare.net/7mary4/ios7-accessibilitypdf, but doesn't need to introduce accessibility. The presentation is also meant to be more conversational.
1. Ted Drake, Intuit Accessibility
Accessibility Camp Bay Area 2014
iCat v2.1.1
with iOS7 accessibility
This presentation was created for the Accessibility Camp, Bay Area March 2014.
It highlights the latest accessibility features via the latest version of a cat app.
photo: black cat on white by Tambako the Jaguar http://www.flickr.com/photos/tambako/7369672266/
2. What’s new in iOS7
• Dynamic Type
• Safari Viewport
• Simplification
• Blur and Low Contrast
• Switch Control
• Guided Access
• Speech Synthesis
• Hand Writing
• Magic Tap (iOS6)
3. Dynamic Type
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
4. Dynamic Type
message.label.font = !
[UIFont !
preferredFontForTextStyle:!
UIFontTextStyleHeadline!
];
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
5. Safari Viewport
Good:
<meta
name="viewport"
content="width=device-width">
!
Bad:
<meta
name="viewport"
content="initial-scale=2.3, user-scalable=no">
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
6. Simplification
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.
7. 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
8. 4.5:1
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
9. Switch Control
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.
photo: Käpälätietokone by Mikko Eerola http://www.flickr.com/photos/mikko-eerola/5380882279/
10. Guided Access
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: cat iPad wallpaper by ipadwallpapers http://www.flickr.com/photos/49474345@N02/4537506609/
!
11. Guided Access API
- (NSArray *)guidedAccessRestrictionIdentifiers {
return @[ ControlsRestrictionId ];
}
- (NSString
*)textForGuidedAccessRestrictionWithIdentifier:
(NSString *)restrictionId {
return @”Controls”;
}
- (NSString
*)detailTextForGuidedAccessRestrictionWithIdentifier:
(NSString *)restrictionId {
return @”Increase catnip”;
}
This sample code comes from the WWDC 2013 presentation: Accessibility in iOS
https://developer.apple.com/wwdc/videos/index.php?id=202
12. Speech Synthesis
AVSpeechSynthesizer!
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/
13. Text to Speech API
AVSpeechSynthesizer *synthesizer =
[[AVSpeechSynthesizer alloc] init];
!
AVSpeechUtterance *utterance =
[AVSpeechUtteranceWithString: @"Hello!"];
!
[speechSynth speakUtterance:utterance];
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-handwriting-mode-ios-7
15. Magic Tap
- (BOOL)accessibilityPerformMagicTap
Two-fingered double tap
activates the key function on
the screen.
!
•Take photo
•Activate mouse trap
•Blame the dog
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: cat and water by wabisabi2015 http://www.flickr.com/photos/necosky/4146940596/
16. iOS 7.1!
iOS 7.1 was officially released this week. Key features are:
•making buttons and links more obvious
•bold setting extends to keyboard and icons
•reduce movement and contrast changes
http://applevis.com/blog/apple/whats-new-and-changed-blind-and-low-vision-users-ios-71
http://www.cultofmac.com/268991/ui-changes-ios-7-1-bringing-iphone-today-gifcity/
photo: purrflux by jon satrom http://www.flickr.com/photos/jonsatrom/4248923663/
17. Button Shapes
Buttons look
like buttons
Links look
like links
Watch for
bad colors
iOS7.1 introduces a new accessibility setting that lets people make buttons and links more obvious. This is helpful for those who are not always able to tell
when something is a text label or button.
Watch for the background colors that are generated, these may not be the expected experience.
18. Make it Bold(er)
Icons and keyboard now inherit the bold text preference
For those that need less contrast, the white reduced.
20. minimal-ui
Before
After
Safari now recognizes the minimal-ui property within the viewport meta tag. This removes the search/url input and navigation bar by default. The user can
restore these by tapping on the top section.
!
https://developer.apple.com/library/ios/releasenotes/General/RN-iOSSDK-7.1/