How to: Accessible iPhone/iPad apps that the blind can use with Rubymotion

954 views

Published on

If you are serious about app development accessibility is key.

Austin Seraphin explains you with knowledge and amazing personality that building accessible apps is easier that you might think.

By reading his tips from its unique point of view you will learn how to implement accessibility in your apps with a smart, lightweight approach.

Austin Seraphin, blind since birth is a point of reference when it comes to accessibility consulting. These are the slides he shared at the Rubymotion conference 2013 in Bruxelles.

It felt so great to translate his notes and thoughts into visuals. It was a chance to dive into his amazing world full of knowledge and great personality.

I'm proud to be able to share, visually, what Austin Seraphin thinks about accessibility.

We should all learn a lot from him.

That is why I constantly follow him on twitter (@AustinSeraphin) and you should to.

Austin Seraphin's website: www.austinseraphin.com

My website: http://italian-label.com

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
954
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

How to: Accessible iPhone/iPad apps that the blind can use with Rubymotion

  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

×