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/

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)

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

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

Safari ViewportGood: <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

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.

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

4.5:1Thin 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

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/

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.htmlCustom restrictions are represented by string identifiers provided by the developer in the guidedAccessRestrictionIdentifiers methodPhoto: cat iPad wallpaper by ipadwallpapers http://www.flickr.com/photos/49474345@N02/4537506609/!

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

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/

Text to Speech API

AVSpeechSynthesizer *synthesizer = [[AVSpeechSynthesizer alloc] init]; !

AVSpeechUtterance *utterance = [AVSpeechUtteranceWithString: @"Hello!"]; !

[speechSynth speakUtterance:utterance];

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

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/

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/

Button ShapesButtons 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.

Make it Bold(er)

Icons and keyboard now inherit the bold text preference For those that need less contrast, the white reduced.

Make it Bold(er)

Icons and keyboard now inherit the bold text preference

minimal-uiBefore

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/

Ted Drake w: last-child.com! t: @ted_drake! s: slideshare.net/7mary4! p: pinterest.com/teddrake! y: youtube.com/7mary4responding! j: intuit.com - Intuit’s hiring: Web, iOS, Android!

!

web site: http://last-child.com twitter: http://twitter.com/ted_drake slideshare: http://slideshare.net/7mary4 pinterest: http://pinterest.com/teddrake youtube: http://youtube.com/7mary4responding job: http://intuit.com !