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

RUBY MOTION
&
ACCESSIBILITY
by Austin Seraphin
iOS Accessibility Consultant

Austin Seraphin
Blind 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 universe
as soon as it entered it.

I could see a stock chart


I could check the weather


then I received my ﬁrst text

From my mom.
It was quite a moment, it really moved her.

The challenge

2 dimensions

The challenge

1 dimension

Apps

I want to download the world!

I got a color reader

but it kept saying: “black”.

Then I realized it was 1 am
and the lights were off...

so I turned the lights on

and ﬁnally I could see all the colors around me.

iPhone makes assistive devices obsolete

=


vs

Color ID Colorino
(Color identiﬁer) (Color identiﬁer)

Free $200


vs

LookTel iBill®
(Money reader) (Talking banknote identiﬁer)

$9.99 $119


vs

Tap to see i.d. mate Quest®
(Object recognition via picture) (Object recognition via bar code)

FREE $1,299


vs

BlindSquare Trekker Breeze
(GPS & step-by-step directions) (GPS & step-by-step directions)

$14.99 $699


vs

Talking Scientiﬁc ORION TI-36X
Calculator (Talking Scientiﬁc Calculator)

$4.49 $249


vs

Flesky PAC Mate Omni
(Eyes-free typing) (Note taker with Braille display)

FREE $995+

Accessibility programming
Apple has baked accessibility right in.

Apple has baked accessibility right in.
Thanks Steve Jobs.

• Standard UIKit controls and views
are accessible by default


• 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.


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



• accessibilityLanguage

• accessibilityFrame

• accessibilityActivationPoint
The point activated when double-tapped. defaults to center.

• accessibilityViewIsModal
Ignores elements within views which are siblings of the receiver



• shouldGroupAccessibilityChildren
Reads in order instead of horizontally

• accessibilityElementHidden


Make good labels

• Labels brieﬂy describe the element.

• They do not include the control type.

• They begin with a capitalized word
and does not end with a period.

• Localized.


Create good hints

• Hints describe the results of performing an action.

• Only provide one when not obvious.


Create good hints

• They brieﬂy 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.


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.


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.


Traits

• UIAccessibilityTraitNone

• UIAccessibilityTraitButton

• UIAccessibilityTraitLink

• UIAccessibilityTraitSearchField

• UIAccessibilityTraitImage
This trait can be combined with the button or link traits.


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.


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 notiﬁcations.
Instead it should poll for changes when it needs updated information.


Traits

• UIAccessibilityTraitAdjustable

• UIAccessibilityTraitAllowsDirectInteraction
Allows direct touch interaction. For example, a view that represents a piano keyboard.

• UIAccessibilityTraitCausesPageTurn
Causes an automatic page turn when VoiceOver ﬁnishes reading the text within it.
Like in iBooks.

• UIAccessibilityTraitNotEnabled
Not enabled and does not respond to user interaction.


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


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


Make Picker Views Accessible

If you need to, you can use

pickerView:accessibilityLabelForComponent:

and

pickerView:accessibilityHintForComponent:


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.


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


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


Enhance the accessibility of table views

class CurrentWeather < UIView

weatherCityString=weatherCity.accessibilityLabel
weatherTempString=WeatherTemp.accessibilityLabel
"#{weatherCityString}, #{weatherTempString}"
end

end

Example: "Philadelphia, 45 degrees"


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

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

• 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.


Notiﬁcations

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.


Notiﬁcations

UIAccessibilityScreenChangedNotification

• When a new view appears which comprises a major
portion of the screen.

• Same parameter as layout changed notiﬁcation.


Notiﬁcations

• UIAccessibilityPageScrolledNotification

• UIAccessibilityAnnouncementNotification
Posted to make VoiceOver say something.

• UIAccessibilityAnnouncementDidFinishNotification
Causes an automatic page turn when VoiceOver ﬁnishes reading the text within it.
Like in iBooks.

• UIAccessibilityTraitNotEnabled
Not enabled and does not respond to user interaction.


Make dynamic elements accessible

• Make sure methods return up to date information.

• Send a UIAccessibilityScreenChangedNotiﬁcation.



class BigKey < UIView

# A custom keyboard key
keyLabel=KeyLabel.accessibilityLabel
if(self.letterKey?)
if(self.shifted?)
keyLabel.upcase
else
keyLabel.downcase
end
end else
keyLabel
end
end

...


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



• UIAccessibilityAction Informal Protocol.
A way to implement speciﬁc 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.



• accessibilityDecrement

• accessibilityIncrement
Works with the UIAccessibilityTraitAdjustable


App developing for the blind

I get more done in Ruby


I get more done in Ruby
I think Ruby sounds better with speech.


XCode works horribly


I need
a beer


I need just to open
a beer XCode

Give me:

Give me:

iMac

Give me:

+

iMac Ruby

Give me:

+ + +

iMac Ruby Terminal

Give me:

iMac No simulator

Ruby

Terminal

Give me:

iMac No simulator
The iOS simulator
doesn't work well with VoiceOver

Ruby

Terminal

Give me:

iMac No simulator
The iOS simulator

Ruby Always better to test it on the device

Terminal

Give me:

iMac No simulator
The iOS simulator

Ruby Always better to test it on the device

The Accessibility Inspector doesn't
tell everything.
Terminal


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.


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.


Geomotion
• It helped me ﬁnally 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.


Teacup
• Percents help lay out screens based on
absolute location.

• A non-verbose syntax sounds better.

• The less pixel math the better.


Functional tests improve Accessibility

• Functional tests use the accessibility label.

• This forces properly labeled buttons,
the biggest complaint.


Conclusion


Conclusion
• RubyMotion increases productivity for the sighted and
especially the blind, and it will only get better.


Conclusion

• The iPhone allows the blind to do wonderful things.


Conclusion


• In most cases you can make your app accessible with
little effort.


Conclusion


• In most cases you can make your app accessible with
little effort.

• It's the right thing to do.


If Apple wouldn't have made the iPhone accessible


I wouldn't stand here now giving this talk.

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

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

Recomendados

Recomendados

Más contenido relacionado

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

Similar a How to: Accessible iPhone/iPad apps that the blind can use with Rubymotion (20)

Último

Último (20)

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