ruby motion and-ios-accessibility

RUBY MOTION &

ACCESSIBILITY

by Austin SeraphiniOS Accessibility Consultant

Austin SeraphinBlind since birth

Accessibility consultant

Passionate developer

@AustinSeraphin AustinSeraphin.com

http://www.AustinSeraphin.com

http://www.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.


I could see a stock chart


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

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

=


Colorino (Color identifier)

Color ID(Color identifier)

Free $200

vs


iBill®(Talking banknote identifier)

vs

LookTel(Money reader)

$9.99 $119


i.d. mate Quest®(Object recognition via bar code)

vs

Tap to see(Object recognition via picture)

FREE $1,299


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

vs

BlindSquare(GPS & step-by-step directions)

$14.99 $699


ORION TI-36X(Talking Scientific Calculator)

vs

Talking Scientific Calculator

$4.49 $249


PAC Mate Omni(Note taker with Braille display)

vs

Flesky(Eyes-free typing)

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

• accessibilityActivationPointThe point activated when double-tapped. defaults to center.

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



• shouldGroupAccessibilityChildrenReads in order instead of horizontally

• accessibilityElementHidden


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.


Create good hints

• Hints describe the results of performing an action.

• Only provide one when not obvious.


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.


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

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


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.


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


• 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


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


UIAccessibilityScreenChangedNotification

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

• Same parameter as layout changed notification.

Notifications


• 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


• Make sure methods return up to date information.

• Send a UIAccessibilityScreenChangedNotification.



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

...



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



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



• accessibilityDecrement

• accessibilityIncrement Works with the UIAccessibilityTraitAdjustable

I get more done in Ruby

App developing for the blind

I get more done in Ruby


I think Ruby sounds better with speech.

XCode works horribly



I needa beer

I needa beer


just to open XCode


Give me:


Give me:

iMac


Give me:

+

RubyiMac


Give me:

+

RubyiMac

++

Terminal


Give me:

No simulator

Ruby

Terminal

iMac


Give me:

The iOS simulator doesn't work well with VoiceOver

No simulator

Ruby

Terminal

iMac


Give me:

The iOS simulator doesn't work well with VoiceOver

No simulator

Always better to test it on the deviceRuby

Terminal

iMac


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.


• 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


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


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.


• 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




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

Conclusion


If Apple wouldn't have made the iPhone accessible


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

http://twitter.com/AustinSeraphin

http://twitter.com/AustinSeraphin

http://austinseraphin.com/

http://austinseraphin.com/

http://italian-label.com/












































http://indyhall.org/








































































ruby motion and-ios-accessibility

Documents

accessibility programmingapple

accessibility right

weatherthe iphone

elements accessible

good hints hints

viewsare accessible

link traits

container protocol