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
27. iPhone makes assistive devices obsolete
vs
Color ID Colorino
(Color identifier) (Color identifier)
Free $200
28. iPhone makes assistive devices obsolete
vs
LookTel iBill®
(Money reader) (Talking banknote identifier)
$9.99 $119
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. iPhone makes assistive devices obsolete
vs
BlindSquare Trekker Breeze
(GPS & step-by-step directions) (GPS & step-by-step directions)
$14.99 $699
31. iPhone makes assistive devices obsolete
vs
Talking Scientific ORION TI-36X
Calculator (Talking Scientific Calculator)
$4.49 $249
32. iPhone makes assistive devices obsolete
vs
Flesky PAC Mate Omni
(Eyes-free typing) (Note taker with Braille display)
FREE $995+
36. • Standard UIKit controls and views
are accessible by default
Accessibility programming
37. • Standard UIKit controls and views
are accessible by default
• The UIAccessibility programming
interface makes applications accessible
Accessibility programming
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. 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
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. UIAccessibility informal protocol Attributes
• shouldGroupAccessibilityChildren
Reads in order instead of horizontally
• accessibilityElementHidden
Accessibility programming
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. Create good hints
• Hints describe the results of performing an action.
• Only provide one when not obvious.
Accessibility programming
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. 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. 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
47. Traits
• UIAccessibilityTraitNone
• UIAccessibilityTraitButton
• UIAccessibilityTraitLink
• UIAccessibilityTraitSearchField
• UIAccessibilityTraitImage
This trait can be combined with the button or link traits.
Accessibility programming
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. 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. 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. 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
53. If you think this code looks simple
then you've begun to get the point.
54. 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
55. Make Picker Views Accessible
If you need to, you can use
pickerView:accessibilityLabelForComponent:
and
pickerView:accessibilityHintForComponent:
Accessibility programming
56. Make custom container views accessible
• 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.
Accessibility programming
57. 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
58. 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
59. Enhance the accessibility of table views
class CurrentWeather < UIView
def accessibilityLabel
weatherCityString=weatherCity.accessibilityLabel
weatherTempString=WeatherTemp.accessibilityLabel
"#{weatherCityString}, #{weatherTempString}"
end
end
Example: "Philadelphia, 45 degrees"
Accessibility programming
60. Make non-textual data accessible
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.
Accessibility programming
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. Notifications
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.
Accessibility programming
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. Make dynamic elements accessible
• Make sure methods return up to date information.
• Send a UIAccessibilityScreenChangedNotification.
Accessibility programming
66. Make dynamic elements accessible
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
...
Accessibility programming
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 here
UIAccessibilityPostNotification(UIAccessibilityLayoutChange
dNotification, nil)
end
end
Accessibility programming
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. Make dynamic elements accessible
• accessibilityDecrement
• accessibilityIncrement
Works with the UIAccessibilityTraitAdjustable
Accessibility programming
80. App developing for the blind
Give me:
iMac No simulator
The iOS simulator
doesn't work well with VoiceOver
Ruby
Terminal
81. App developing for the blind
Give me:
iMac No simulator
The iOS simulator
doesn't work well with VoiceOver
Ruby Always better to test it on the device
Terminal
82. App developing for the blind
Give me:
iMac No simulator
The iOS simulator
doesn't work well with VoiceOver
Ruby Always better to test it on the device
The Accessibility Inspector doesn't
tell everything.
Terminal
83. App developing for the blind
RubyMotion 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. 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.
85. 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.
86. 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.
87. App developing for the blind
Functional tests improve Accessibility
• Functional tests use the accessibility label.
• This forces properly labeled buttons,
the biggest complaint.
89. App developing for the blind
Conclusion
• RubyMotion increases productivity for the sighted and
especially the blind, and it will only get better.
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. 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. 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.
• It's the right thing to do.
93. App developing for the blind
If Apple wouldn't have made the iPhone accessible
94. App developing for the blind
I wouldn't stand here now giving this talk.
95. Rubymotion & Accessibility
Austin Seraphin
Accessibility consultant
@AustinSeraphin
AustinSeraphin.com
Special thanks to
For the visuals For being such an
italian-label.com amazing
community
IndyHall.org
advertising