ruby motion and-ios-accessibility
TRANSCRIPT
RUBY MOTION &
ACCESSIBILITY
by Austin SeraphiniOS Accessibility Consultant
Austin SeraphinBlind since birth
Accessibility consultant
Passionate developer
@AustinSeraphin AustinSeraphin.com
I started on an Apple II/e
The 1st computer that a blind person could use
then I moved to MS-DOS
and then unfortunately...
I used Windows
(still don’t know why)
then I moved to Linux
Yeahhh!
then I got an iPhone
and that was the tipping point.
Then I got 2 Macs and an iPad!
The iPhone changed my universeas soon as it entered it.
The iPhone changed my universeas soon as it entered it.
I could see a stock chart
The iPhone changed my universeas soon as it entered it.
I could check the weather
From my mom. It was quite a moment, it really moved her.
then I received my first text
2 dimensions
The challenge
The challenge
1 dimension
I want to download the world!
Apps
I got a color reader
but it kept saying: “black”.
I got a color reader
black
black
black
black
I thoughtit wasn’t working
Then I realized it was 1 am
Then I realized it was 1 amand the lights were off...
and finally I could see all the colors around me.
so I turned the lights on
iPhone makes assistive devices obsolete
=
iPhone makes assistive devices obsolete
Colorino (Color identifier)
Color ID(Color identifier)
Free $200
vs
iPhone makes assistive devices obsolete
iBill®(Talking banknote identifier)
vs
LookTel(Money reader)
$9.99 $119
iPhone makes assistive devices obsolete
i.d. mate Quest®(Object recognition via bar code)
vs
Tap to see(Object recognition via picture)
FREE $1,299
iPhone makes assistive devices obsolete
Trekker Breeze(GPS & step-by-step directions)
vs
BlindSquare(GPS & step-by-step directions)
$14.99 $699
iPhone makes assistive devices obsolete
ORION TI-36X(Talking Scientific Calculator)
vs
Talking Scientific Calculator
$4.49 $249
iPhone makes assistive devices obsolete
PAC Mate Omni(Note taker with Braille display)
vs
Flesky(Eyes-free typing)
FREE $995+
Accessibility programming
Apple has baked accessibility right in.
Accessibility programming
Apple has baked accessibility right in.
Accessibility programming
Thanks Steve Jobs.
Accessibility programming
• Standard UIKit controls and views are accessible by default
Accessibility programming
• Standard UIKit controls and views are accessible by default
• The UIAccessibility programming interface makes applications accessible
Two protocols, a class, and a file of constants
• The UIAccessibility informal protocol Defines attributes to convey proper information to VoiceOver.
• The UIAccessibility Container Informal protocol Allows subclasses of UIView to make some or all elements accessible as separate elements.
• The accessibilityElement class Defines an object not usually accessible to VoiceOver. The container protocol uses these.
Accessibility programming
UIAccessibility informal protocol Attributes
• accessibilityLabel Defaults to title or image name. Image names usually make bad labels.
• accessibilityHint
• accessibilityTraits Describe an element's state, behavior, or usage.
• accessibilityValue
Accessibility programming
UIAccessibility informal protocol Attributes
• accessibilityLanguage
• accessibilityFrame
• accessibilityActivationPointThe point activated when double-tapped. defaults to center.
• accessibilityViewIsModal Ignores elements within views which are siblings of the receiver
Accessibility programming
UIAccessibility informal protocol Attributes
• shouldGroupAccessibilityChildrenReads in order instead of horizontally
• accessibilityElementHidden
Accessibility programming
Make good labels
• Labels briefly describe the element.
• They do not include the control type.
• They begin with a capitalized word and does not end with a period.
• Localized.
Accessibility programming
Create good hints
• Hints describe the results of performing an action.
• Only provide one when not obvious.
Accessibility programming
Create good hints
• They briefly describe results.
• They begin with a verb and omit the subject.
• They use the third person singular declarative form - Plays music instead of play music.
Accessibility programming
Create good hints
• Imagine describing it to a friend:"Tapping the button plays music."
• They begin with a capitalized word and ends with a period.
• They do not include the action or gesture.
• They do not include the name or type of the controller or view.
Accessibility programming
Traits
Traits describe the behavior of an accessible user interface element. Or them with the vertical.
For example: for an image that opens a link in Safari, combine the image and link traits.
Accessibility programming
Traits
• UIAccessibilityTraitNone
• UIAccessibilityTraitButton
• UIAccessibilityTraitLink
• UIAccessibilityTraitSearchField
• UIAccessibilityTraitImage This trait can be combined with the button or link traits.
Accessibility programming
Traits
• UIAccessibilityTraitSelected For example, a selected table row, or a selected segment in a segmented control.
• UIAccessibilityTraitKeyboardKey
• UIAccessibilityTraitStaticText
• UIAccessibilityTraitSummaryElement This provides summary information when the application starts.
Accessibility programming
Traits
• UIAccessibilityTraitPlaysSoundThe accessibility element plays its own sound when activated.
• UIAccessibilityTraitStartsMediaSessionSilences VoiceOver during a media session that should not be interrupted. For example, silence VoiceOver speech while the user is recording audio.
• UIAccessibilityTraitUpdatesFrequentlyTells VoiceOver to avoid handling continual notifications. Instead it should poll for changes when it needs updated information.
Accessibility programming
Traits
• UIAccessibilityTraitAdjustable
• UIAccessibilityTraitAllowsDirectInteraction Allows direct touch interaction. For example, a view that represents a piano keyboard.
• UIAccessibilityTraitCausesPageTurnCauses an automatic page turn when VoiceOver finishes reading the text within it. Like in iBooks.
• UIAccessibilityTraitNotEnabledNot enabled and does not respond to user interaction.
Accessibility programming
Set attributes in a custom subclass implementation
class MyCustomView < UIView def accessibilityElement? true end def accessibilityLabel BubbleWrap.localized_string(:MyCustomView_label,nil) end def accessibilityHint BubbleWrap.localized_string(:MyCustomView_hint,nil) end # This view behaves like a button. def accessibilityTraits UIAccessibilityTraitButton end end
Accessibility programming
If you think this code looks simple
If you think this code looks simple then you've begun to get the point.
Set attributes in the instantiation code
class MyCustomViewController < UIViewController
def init view=MyCustomView.alloc.init view.accessibilityElement?=true view.accessibilityTraits=UIAccessibilityTraitButton view.accessibilityLabel=BubbleWrap.
localized_string(:MyCustomView_label, nil) view.accessibilityHint=BubbleWrap.
localized_string(:MyCustomView_hint, nil) end
end
Accessibility programming
Make Picker Views Accessible
Accessibility programming
If you need to, you can use
pickerView:accessibilityLabelForComponent:
and
pickerView:accessibilityHintForComponent:
Make custom container views accessible
Accessibility programming
• If you use UITableView then you don't have to worry.
• You need to make the contained elements accessible, but the container not accessible.
• Users interact with the elements, not the container.
The container protocol makes the contained elements available as an array.
class MultiFacetedView < UIView def accessibilityElements if @accessibility_element.nil? @accessible_elements=Array.new element1=UIAccessibilityElement.
alloc.initWithAccessibilityContainer(self) # set attributes @accessibility_elements<<element1 # Perform similar steps for other elements end @accessible_elements end def accessibilityElement? false end ...
Accessibility programming
The container protocol makes the contained elements available as an array.
...
def accessibilityElementCount accessibilityElements.length end def accessibilityElementAtIndex(index) accessibilityElements[index] end def indexOfAccessibilityElement(element) accessibilityElements.find_index(element) end end
Accessibility programming
Enhance the accessibility of table views
Accessibility programming
class CurrentWeather < UIView def accessibilityLabel weatherCityString=weatherCity.accessibilityLabel weatherTempString=WeatherTemp.accessibilityLabel "#{weatherCityString}, #{weatherTempString}" end end
Example: "Philadelphia, 45 degrees"
Make non-textual data accessible
Accessibility programming
A custom view that draws the number of stars for an item's rating.class RatingView <UIView attr_accessor starCount # ... other implementation code here ... def accessibilityLabel if(@starCount==1) ratingString=BubbleWrap.localized_string(:rating_singular_label, "star") else ratingString=BubbleWrap.localized_string(:rating_plural_label, "stars") end "#{@starCount} #{ratingString}" end
# ... other implementation code here ... end
Example: 1 star. 2 stars. 3 stars.
Notifications
Accessibility programming
• You can observe and post notifications.
• Observable notifications come from UIKit or from other accessibility changes.
• You observe using the standard notification center.
• You post using UIAccessibilityPostNotification.
Notifications
Accessibility programming
UIAccessibilityLayoutChangedNotification
• When the layout of the screen changes, such as when an element appears or disappears.
• Includes one parameter, either a string which VoiceOver speaks, or an accessibilityElement VoiceOver moves to.
Notifications
Accessibility programming
UIAccessibilityScreenChangedNotification
• When a new view appears which comprises a major portion of the screen.
• Same parameter as layout changed notification.
Notifications
Accessibility programming
• UIAccessibilityPageScrolledNotification
• UIAccessibilityAnnouncementNotificationPosted to make VoiceOver say something.
• UIAccessibilityAnnouncementDidFinishNotificationCauses an automatic page turn when VoiceOver finishes reading the text within it. Like in iBooks.
• UIAccessibilityTraitNotEnabledNot enabled and does not respond to user interaction.
Make dynamic elements accessible
Accessibility programming
• Make sure methods return up to date information.
• Send a UIAccessibilityScreenChangedNotification.
Make dynamic elements accessible
Accessibility programming
class BigKey < UIView # A custom keyboard key def accessibilityLabel keyLabel=KeyLabel.accessibilityLabel if(self.letterKey?) if(self.shifted?) keyLabel.upcase else keyLabel.downcase end end else keyLabel end end
...
Make dynamic elements accessible
Accessibility programming
... def accessibilityTraits traits=super.accessibilityTraits|UIAccessibilityTraitKeyboardKey if(self.shiftKey?&&self.selected?) traits|=UIAccessibilityTraitSelected end traits end
def keyboardChangedToNumbers # perform number change here UIAccessibilityPostNotification(UIAccessibilityLayoutChangedNotification, nil) end end
Make dynamic elements accessible
Accessibility programming
• UIAccessibilityAction Informal Protocol. A way to implement specific actions on accessibility objects
• accessibilityPerformEscapeDismisses a modal view and returns the success or failure of the action
• accessibilityPerformMagicTap
• accessibilityScrollScrolls content and returns success or failure.
Takes UIAccessibilityScrollDirection as a parameter.
Make dynamic elements accessible
Accessibility programming
• accessibilityDecrement
• accessibilityIncrement Works with the UIAccessibilityTraitAdjustable
I get more done in Ruby
App developing for the blind
I get more done in Ruby
App developing for the blind
I think Ruby sounds better with speech.
XCode works horribly
App developing for the blind
App developing for the blind
I needa beer
I needa beer
App developing for the blind
just to open XCode
App developing for the blind
Give me:
App developing for the blind
Give me:
iMac
App developing for the blind
Give me:
+
RubyiMac
App developing for the blind
Give me:
+
RubyiMac
++
Terminal
App developing for the blind
Give me:
No simulator
Ruby
Terminal
iMac
App developing for the blind
Give me:
The iOS simulator doesn't work well with VoiceOver
No simulator
Ruby
Terminal
iMac
App developing for the blind
Give me:
The iOS simulator doesn't work well with VoiceOver
No simulator
Always better to test it on the deviceRuby
Terminal
iMac
App developing for the blind
Give me:
Ruby
Terminal
iMacThe iOS simulator doesn't work well with VoiceOver
No simulator
Always better to test it on the device
The Accessibility Inspector doesn't tell everything.
App developing for the blind
• Based on GDB, it can connect to and introspect RubyMotion processes.
• It works effectively, still the experience could use improving.
• The developers plan to build a higher level and friendlier debugger.
RubyMotion Debugger
App developing for the blind
Interface Builder has no accessibility.
• I had to learn how to build views programmatically.
• I think of the screen either as objects relative to each other, or as objects positioned absolutely on a screen.
App developing for the blind
Geomotion
• It helped me finally understand iOS geometry and gave me that ah ha moment!
• CGRect.make helps understand the code.
• Methods such as below and beside help lay out elements relative to each other.
App developing for the blind
Teacup
• Percents help lay out screens based on absolute location.
• A non-verbose syntax sounds better.
• The less pixel math the better.
App developing for the blind
Functional tests improve Accessibility
• Functional tests use the accessibility label.
• This forces properly labeled buttons,the biggest complaint.
App developing for the blind
Conclusion
App developing for the blind
Conclusion• RubyMotion increases productivity for the sighted and
especially the blind, and it will only get better.
App developing for the blind
• RubyMotion increases productivity for the sighted and especially the blind, and it will only get better.
• The iPhone allows the blind to do wonderful things.
Conclusion
App developing for the blind
• RubyMotion increases productivity for the sighted and especially the blind, and it will only get better.
• The iPhone allows the blind to do wonderful things.
• In most cases you can make your app accessible with little effort.
Conclusion
App developing for the blind
• RubyMotion increases productivity for the sighted and especially the blind, and it will only get better.
• The iPhone allows the blind to do wonderful things.
• In most cases you can make your app accessible with little effort.
• It's the right thing to do.
Conclusion
App developing for the blind
If Apple wouldn't have made the iPhone accessible
App developing for the blind
I wouldn't stand here now giving this talk.
Austin SeraphinAccessibility consultant
@AustinSeraphin
AustinSeraphin.com
Rubymotion & Accessibility
advertising
Special thanks to
For the visualsitalian-label.com
For being such an amazing communityIndyHall.org