RUBY MOTION             &ACCESSIBILITY    by Austin SeraphiniOS Accessibility Consultant
Austin Seraphin                      Blind since birth                      Accessibility consultant                      ...
I started on an Apple II/eThe 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 universe     as soon as it entered it.
I could see a stock chart   The iPhone changed my universe        as soon as it entered it.
I could check the weather    The iPhone changed my universe         as soon as it entered it.
then I received my first text                 From my mom.  It was quite a moment, it really moved her.
The challenge   2 dimensions
The challenge   1 dimension
AppsI want to download the world!
I got a color reader
I got a color reader  but it kept saying: “black”.
black
black
black
black
I thoughtit wasn’t working
Then I realized it was 1 am
Then I realized it was 1 am and the lights were off...
so I turned the lights onand finally I could see all the colors around me.
iPhone makes assistive devices obsolete              =
iPhone makes assistive devices obsolete                       vs    Color ID                Colorino   (Color identifier)  ...
iPhone makes assistive devices obsolete                    vs    LookTel                      iBill®   (Money reader)     ...
iPhone makes assistive devices obsolete                                   vs       Tap to see                        i.d. ...
iPhone makes assistive devices obsolete                                  vs    BlindSquare                          Trekke...
iPhone makes assistive devices obsolete                    vsTalking Scientific         ORION TI-36X   Calculator          ...
iPhone makes assistive devices obsolete                        vs      Flesky                  PAC Mate Omni   (Eyes-free ...
Accessibility programming
Accessibility programming  Apple has baked accessibility right in.
Accessibility programming  Apple has baked accessibility right in.          Thanks Steve Jobs.
•   Standard UIKit controls and views    are accessible by defaultAccessibility programming
•   Standard UIKit controls and views    are accessible by default•    The UIAccessibility programming    interface makes ...
Two protocols, a class, and a file of constants•   The UIAccessibility informal protocol    Defines attributes to convey pro...
UIAccessibility informal protocol Attributes•   accessibilityLabel    Defaults to title or image name. Image names usually...
UIAccessibility informal protocol Attributes•   accessibilityLanguage•   accessibilityFrame•   accessibilityActivationPoin...
UIAccessibility informal protocol Attributes•   shouldGroupAccessibilityChildren    Reads in order instead of horizontally...
Make good labels•   Labels briefly describe the element.•   They do not include the control type.•   They begin with a capi...
Create good hints•   Hints describe the results of performing an action.•   Only provide one when not obvious.    Accessib...
Create good hints•   They briefly describe results.•   They begin with a verb and omit the subject.•   They use the third p...
Create good hints•   Imagine describing it to a friend:    "Tapping the button plays music."•   They begin with a capitali...
TraitsTraits describe the behavior of an accessible user interfaceelement. Or them with the vertical.For example: for an i...
Traits•   UIAccessibilityTraitNone•   UIAccessibilityTraitButton•   UIAccessibilityTraitLink•   UIAccessibilityTraitSearch...
Traits•   UIAccessibilityTraitSelected    For example, a selected table row, or a selected segment in a segmented control....
Traits•   UIAccessibilityTraitPlaysSound    The accessibility element plays its own sound when activated.•   UIAccessibili...
Traits•   UIAccessibilityTraitAdjustable•   UIAccessibilityTraitAllowsDirectInteraction    Allows direct touch interaction...
Set attributes in a custom subclass implementationclass MyCustomView < UIView  def accessibilityElement?    true  end  def...
If you think this code looks simple
If you think this code looks simplethen youve begun to get the point.
Set attributes in the instantiation codeclass MyCustomViewController < UIViewController  def init    view=MyCustomView.all...
Make Picker Views AccessibleIf you need to, you can usepickerView:accessibilityLabelForComponent:andpickerView:accessibili...
Make custom container views accessible•   If you use UITableView then you dont have to worry.•   You need to make the cont...
The container protocolmakes the contained elements available as an array.   class MultiFacetedView < UIView     def access...
The container protocolmakes the contained elements available as an array.  ...  def accessibilityElementCount      accessi...
Enhance the accessibility of table viewsclass CurrentWeather < UIView  def accessibilityLabel    weatherCityString=weather...
Make non-textual data accessibleA custom view that draws the number of stars for an items rating.class RatingView <UIView ...
Notifications•   You can observe and post notifications.•   Observable notifications come from UIKit or from other    accessi...
NotificationsUIAccessibilityLayoutChangedNotification•   When the layout of the screen changes, such as when an    element ...
NotificationsUIAccessibilityScreenChangedNotification•   When a new view appears which comprises a major    portion of the ...
Notifications•   UIAccessibilityPageScrolledNotification•   UIAccessibilityAnnouncementNotification    Posted to make Voice...
Make dynamic elements accessible•   Make sure methods return up to date information.•   Send a UIAccessibilityScreenChange...
Make dynamic elements accessibleclass BigKey < UIView  # A custom keyboard key  def accessibilityLabel    keyLabel=KeyLabe...
Make dynamic elements accessible... def accessibilityTraits    traits=super.accessibilityTraits|UIAccessibilityTraitKeyboa...
Make dynamic elements accessible•   UIAccessibilityAction Informal Protocol.    A way to implement specific actions on acce...
Make dynamic elements accessible•   accessibilityDecrement•   accessibilityIncrement    Works with the UIAccessibilityTrai...
App developing for the blind   I get more done in Ruby
App developing for the blind     I get more done in RubyI think Ruby sounds better with speech.
App developing for the blind   XCode works horribly
App developing for the blindI needa beer
App developing for the blindI need               just to opena beer                  XCode
App developing for the blind         Give me:
App developing for the blind                Give me:iMac
App developing for the blind                Give me:         +iMac            Ruby
App developing for the blind                Give me:         +                 +   +iMac            Ruby               Ter...
App developing for the blind       Give me:iMac            No simulatorRubyTerminal
App developing for the blind       Give me:iMac            No simulator                The iOS simulator                do...
App developing for the blind       Give me:iMac            No simulator                The iOS simulator                do...
App developing for the blind       Give me:iMac            No simulator                The iOS simulator                do...
App developing for the blindRubyMotion Debugger          •   Based on GDB, it can connect to and              introspect R...
App developing for the blindInterface Builder has no accessibility.             •   I had to learn how to build views     ...
App developing for the blindGeomotion      •   It helped me finally understand iOS geometry          and gave me that ah ha...
App developing for the blindTeacup         •   Percents help lay out screens based on             absolute location.      ...
App developing for the blindFunctional tests improve Accessibility        •   Functional tests use the accessibility label...
App developing for the blind             Conclusion
App developing for the blind    Conclusion•   RubyMotion increases productivity for the sighted and    especially the blin...
App developing for the blind    Conclusion•   RubyMotion increases productivity for the sighted and    especially the blin...
App developing for the blind    Conclusion•   RubyMotion increases productivity for the sighted and    especially the blin...
App developing for the blind    Conclusion•   RubyMotion increases productivity for the sighted and    especially the blin...
App developing for the blindIf Apple wouldnt have made the iPhone accessible
App developing for the blindI wouldnt stand here now giving this talk.
Rubymotion & Accessibility                               Austin Seraphin                               Accessibility consu...
Upcoming SlideShare
Loading in...5
×

Ruby motion and-ios-accessibility

2,959

Published on

0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,959
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
18
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Ruby motion and-ios-accessibility

  1. 1. RUBY MOTION &ACCESSIBILITY by Austin SeraphiniOS Accessibility Consultant
  2. 2. Austin Seraphin Blind since birth Accessibility consultant Passionate developer@AustinSeraphin AustinSeraphin.com
  3. 3. I started on an Apple II/eThe 1st computer that a blind person could use
  4. 4. then I moved to MS-DOS and then unfortunately...
  5. 5. I used Windows (still don’t know why)
  6. 6. then I moved to Linux Yeahhh!
  7. 7. then I got an iPhone and that was the tipping point.
  8. 8. Then I got 2 Macs and an iPad!
  9. 9. The iPhone changed my universe as soon as it entered it.
  10. 10. I could see a stock chart The iPhone changed my universe as soon as it entered it.
  11. 11. I could check the weather The iPhone changed my universe as soon as it entered it.
  12. 12. then I received my first text From my mom. It was quite a moment, it really moved her.
  13. 13. The challenge 2 dimensions
  14. 14. The challenge 1 dimension
  15. 15. AppsI want to download the world!
  16. 16. I got a color reader
  17. 17. I got a color reader but it kept saying: “black”.
  18. 18. black
  19. 19. black
  20. 20. black
  21. 21. black
  22. 22. I thoughtit wasn’t working
  23. 23. Then I realized it was 1 am
  24. 24. Then I realized it was 1 am and the lights were off...
  25. 25. so I turned the lights onand finally I could see all the colors around me.
  26. 26. iPhone makes assistive devices obsolete =
  27. 27. iPhone makes assistive devices obsolete vs Color ID Colorino (Color identifier) (Color identifier) Free $200
  28. 28. iPhone makes assistive devices obsolete vs LookTel iBill® (Money reader) (Talking banknote identifier) $9.99 $119
  29. 29. iPhone makes assistive devices obsolete vs Tap to see i.d. mate Quest®(Object recognition via picture) (Object recognition via bar code) FREE $1,299
  30. 30. iPhone makes assistive devices obsolete vs BlindSquare Trekker Breeze(GPS & step-by-step directions) (GPS & step-by-step directions) $14.99 $699
  31. 31. iPhone makes assistive devices obsolete vsTalking Scientific ORION TI-36X Calculator (Talking Scientific Calculator) $4.49 $249
  32. 32. iPhone makes assistive devices obsolete vs Flesky PAC Mate Omni (Eyes-free typing) (Note taker with Braille display) FREE $995+
  33. 33. Accessibility programming
  34. 34. Accessibility programming Apple has baked accessibility right in.
  35. 35. Accessibility programming Apple has baked accessibility right in. Thanks Steve Jobs.
  36. 36. • Standard UIKit controls and views are accessible by defaultAccessibility programming
  37. 37. • Standard UIKit controls and views are accessible by default• The UIAccessibility programming interface makes applications accessibleAccessibility programming
  38. 38. 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
  39. 39. UIAccessibility informal protocol Attributes• accessibilityLabel Defaults to title or image name. Image names usually make bad labels.• accessibilityHint• accessibilityTraits Describe an elements state, behavior, or usage.• accessibilityValue Accessibility programming
  40. 40. UIAccessibility informal protocol Attributes• accessibilityLanguage• accessibilityFrame• accessibilityActivationPoint The point activated when double-tapped. defaults to center.• accessibilityViewIsModal Ignores elements within views which are siblings of the receiver Accessibility programming
  41. 41. UIAccessibility informal protocol Attributes• shouldGroupAccessibilityChildren Reads in order instead of horizontally• accessibilityElementHidden Accessibility programming
  42. 42. 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
  43. 43. Create good hints• Hints describe the results of performing an action.• Only provide one when not obvious. Accessibility programming
  44. 44. 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
  45. 45. 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
  46. 46. TraitsTraits describe the behavior of an accessible user interfaceelement. Or them with the vertical.For example: for an image that opens a link in Safari, combinethe image and link traits. Accessibility programming
  47. 47. Traits• UIAccessibilityTraitNone• UIAccessibilityTraitButton• UIAccessibilityTraitLink• UIAccessibilityTraitSearchField• UIAccessibilityTraitImage This trait can be combined with the button or link traits. Accessibility programming
  48. 48. 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
  49. 49. Traits• UIAccessibilityTraitPlaysSound The accessibility element plays its own sound when activated.• UIAccessibilityTraitStartsMediaSession Silences VoiceOver during a media session that should not be interrupted. For example, silence VoiceOver speech while the user is recording audio.• UIAccessibilityTraitUpdatesFrequently Tells VoiceOver to avoid handling continual notifications. Instead it should poll for changes when it needs updated information. Accessibility programming
  50. 50. Traits• UIAccessibilityTraitAdjustable• UIAccessibilityTraitAllowsDirectInteraction Allows direct touch interaction. For example, a view that represents a piano keyboard.• UIAccessibilityTraitCausesPageTurn Causes an automatic page turn when VoiceOver finishes reading the text within it. Like in iBooks.• UIAccessibilityTraitNotEnabled Not enabled and does not respond to user interaction. Accessibility programming
  51. 51. Set attributes in a custom subclass implementationclass 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 endendAccessibility programming
  52. 52. If you think this code looks simple
  53. 53. If you think this code looks simplethen youve begun to get the point.
  54. 54. Set attributes in the instantiation codeclass 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) endendAccessibility programming
  55. 55. Make Picker Views AccessibleIf you need to, you can usepickerView:accessibilityLabelForComponent:andpickerView:accessibilityHintForComponent: Accessibility programming
  56. 56. Make custom container views accessible• If you use UITableView then you dont have to worry.• You need to make the contained elements accessible, but the container not accessible.• Users interact with the elements, not the container. Accessibility programming
  57. 57. The container protocolmakes 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
  58. 58. The container protocolmakes 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
  59. 59. Enhance the accessibility of table viewsclass CurrentWeather < UIView def accessibilityLabel weatherCityString=weatherCity.accessibilityLabel weatherTempString=WeatherTemp.accessibilityLabel "#{weatherCityString}, #{weatherTempString}" endendExample: "Philadelphia, 45 degrees" Accessibility programming
  60. 60. Make non-textual data accessibleA custom view that draws the number of stars for an items 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 ...endExample: 1 star. 2 stars. 3 stars. Accessibility programming
  61. 61. Notifications• 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. Accessibility programming
  62. 62. NotificationsUIAccessibilityLayoutChangedNotification• 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. Accessibility programming
  63. 63. NotificationsUIAccessibilityScreenChangedNotification• When a new view appears which comprises a major portion of the screen.• Same parameter as layout changed notification. Accessibility programming
  64. 64. Notifications• UIAccessibilityPageScrolledNotification• UIAccessibilityAnnouncementNotification Posted to make VoiceOver say something.• UIAccessibilityAnnouncementDidFinishNotification Causes an automatic page turn when VoiceOver finishes reading the text within it. Like in iBooks.• UIAccessibilityTraitNotEnabled Not enabled and does not respond to user interaction. Accessibility programming
  65. 65. Make dynamic elements accessible• Make sure methods return up to date information.• Send a UIAccessibilityScreenChangedNotification. Accessibility programming
  66. 66. Make dynamic elements accessibleclass 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 ... Accessibility programming
  67. 67. Make dynamic elements accessible... def accessibilityTraits traits=super.accessibilityTraits|UIAccessibilityTraitKeyboardKey if(self.shiftKey?&&self.selected?) traits|=UIAccessibilityTraitSelected end traits end def keyboardChangedToNumbers # perform number change hereUIAccessibilityPostNotification(UIAccessibilityLayoutChangedNotification, nil) endend Accessibility programming
  68. 68. Make dynamic elements accessible• UIAccessibilityAction Informal Protocol. A way to implement specific actions on accessibility objects• accessibilityPerformEscape Dismisses a modal view and returns the success or failure of the action• accessibilityPerformMagicTap• accessibilityScroll Scrolls content and returns success or failure. Takes UIAccessibilityScrollDirection as a parameter. Accessibility programming
  69. 69. Make dynamic elements accessible• accessibilityDecrement• accessibilityIncrement Works with the UIAccessibilityTraitAdjustable  Accessibility programming
  70. 70. App developing for the blind I get more done in Ruby
  71. 71. App developing for the blind I get more done in RubyI think Ruby sounds better with speech.
  72. 72. App developing for the blind XCode works horribly
  73. 73. App developing for the blindI needa beer
  74. 74. App developing for the blindI need just to opena beer XCode
  75. 75. App developing for the blind Give me:
  76. 76. App developing for the blind Give me:iMac
  77. 77. App developing for the blind Give me: +iMac Ruby
  78. 78. App developing for the blind Give me: + + +iMac Ruby Terminal
  79. 79. App developing for the blind Give me:iMac No simulatorRubyTerminal
  80. 80. App developing for the blind Give me:iMac No simulator The iOS simulator doesnt work well with VoiceOverRubyTerminal
  81. 81. App developing for the blind Give me:iMac No simulator The iOS simulator doesnt work well with VoiceOverRuby Always better to test it on the deviceTerminal
  82. 82. App developing for the blind Give me:iMac No simulator The iOS simulator doesnt work well with VoiceOverRuby Always better to test it on the device The Accessibility Inspector doesnt tell everything.Terminal
  83. 83. App developing for the blindRubyMotion Debugger • 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.
  84. 84. App developing for the blindInterface 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.
  85. 85. App developing for the blindGeomotion • 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.
  86. 86. App developing for the blindTeacup • Percents help lay out screens based on absolute location. • A non-verbose syntax sounds better. • The less pixel math the better.
  87. 87. App developing for the blindFunctional tests improve Accessibility • Functional tests use the accessibility label. • This forces properly labeled buttons, the biggest complaint.
  88. 88. App developing for the blind Conclusion
  89. 89. App developing for the blind Conclusion• RubyMotion increases productivity for the sighted and especially the blind, and it will only get better.
  90. 90. App developing for the blind Conclusion• 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.
  91. 91. App developing for the blind Conclusion• 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.
  92. 92. App developing for the blind Conclusion• 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.• Its the right thing to do.
  93. 93. App developing for the blindIf Apple wouldnt have made the iPhone accessible
  94. 94. App developing for the blindI wouldnt stand here now giving this talk.
  95. 95. Rubymotion & Accessibility Austin Seraphin Accessibility consultant @AustinSeraphin AustinSeraphin.comSpecial thanks to For the visuals For being such an italian-label.com amazing community IndyHall.org advertising
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×