Mobile Accessibility - Accessibility Camp Toronto

Mobile Accessibility

Accessibility Camp - Toronto, 2012
Ted Drake, Intuit Accessibility
Saturday, November 17, 12

Hurdle race on snowshoes, Montreal, QC, 1892

• This presentation:
Slideshare.net/7mary4

• Photos from Flickr Commons


Wrestlers, McGill boxing, wrestling and fencing club, Montreal, 1925

Screen Reader


Screen readers are more than a text to speech engine.
They analyze the page/screen and create their own version of the structure. which allows the user to navigate via headers, form
inputs, landmarks, etc.
Popular screen readers are Narrator for windows 8, VoiceOver for Mac, TalkBack and ChromeVox for Android.
JAWS and NVDA are for windows desktop and should be available for Win8 mobile tablet.

Plastic sneeuwstormbeschermer / Face protection from snowstorms


Screen readers work like a tasty batch of Poutine.
Poutine!

Poutine Readers

Gravy

Curds

Taters


Screen readers, such as VoiceOver, TalkBack, and Narrator have three layers
The application sits on the bottom. The screen reader sits on top of this, like the curds. The
gravy is the user.
The screen reader interprets the input from gravy and output of the taters.
For automated testing, replace the gravy with software that recreates a user’s expectations.

Braille


Young woman and man braille reading on park bench http://www.ﬂickr.com/photos/
center_for_jewish_history/4926954971/
Braille is a tactile alphabet for reading. Refreshable braille displays allow users to interact
with their mobile devices via bluetooth. iOS and Android’s Jellybean support braille output.

Cognitive Disabilities

The direct interaction between ﬁnger and input has made mobile devices accessible to those with cognitive disabilities. Apps, such as schedule reminders, help
those with memory loss due to traumatic brain injury.

Guided Access for iOS6 allows the user to focus on using only one app at a time. Good for ADD and cognitive disabilities.

Mobile apps in general are more focused and task oriented.

"Old Woman in a Shoe", from the Mother Goose Nursery Rhymes, Montreal, 1866-67

Low
Vision


Ice mask, C.T. Madigan, between 1911-1914 / photograph by Frank Hurley http://www.ﬂickr.com/photos/statelibraryofnsw/
2963668712/

The following slide is an interview with Karo Caran about using the iPad with low vision.

Assistive Communication

this child uses Proloque2Go to communicate with his parents. This app uses icons to build
sentences and speak for the user. This replaces bulky, fragile equipment that can cost over
$4,000
http://www.youtube.com/watch?v=Tp2ROyyyqjo Toddler with apraxia Asking for Cheese and Cracker on Ipad with Proloquo2Go and ASL

Alternate Inputs


Braille displays, single switches, and other alternative inputs can be enabled with mobile devices. Often times, the
mobile device becomes the alternate input for other technology. iOS AssistiveTouch provides enhanced control of
this functionality

High skates, copied for Captain J. Miner, 1870

iOS - Android - Win8 - HTML5


Gymnastic group, Trafalgar School, Montreal, QC, 1933-35

iOS

LSE Sports Day, Apple Bobbing, May 1932 http://www.ﬂickr.com/photos/lselibrary/4166786914/

Accessibility features are baked into every Apple device. VoiceOver is the core engine for translating user interactions between the app and the assistive
technology.

VoiceOver


VoiceOver is more than a screen reader. It’s a layer that acts as a middle layer between the user and app. It interprets gestures and
content.

It also can be used by automated testing to replace the user with scripts. Accessibility -> automated testing

Erik Bye og Otto Nilsen i radio studio 13. mars 1958. - http://www.ﬂickr.com/photos/national_archives_of_norway/5476890757/

Hearing

Apple is now certifying hearing aids to provide digital audio experience and minimal radio interference
some apps are now using the phone to detect sound and act as “ears” for users.
Skype, face to face and other apps allow people to communicate via sign language
Royal Bank Branch, Notre Dame Street, Montreal, QC, 1911

Guided Access

Guided Access allows the user to close off certain parts of apps to minimize distractions. This is useful for autism, ADD, and classrooms to keep people focused on
a single task and away from angry birds.

Snowshoeing Indian ﬁle, Mount Royal, Montreal, QC, 1879

Android


Department Store Toy Display

http://developer.android.com/guide/topics/ui/accessibility/apps.html

Before
Ice Cream
Sandwich


http://www.ﬂickr.com/photos/ﬁeld_museum_library/3405449492/in/photostream/ Girl dressed like a bee
74% of users are still on pre-ICS phones.
Honeycomb and other pre-ICS versions have minimal accessibility support. DPad focus control is critical. Making your app
accessible fortunately helps all versions.

Ice
Cream
Sandwich


Members of the Donald Dannheim Family Who Operate a Dairy and Ice Cream Store - http://www.ﬂickr.com/photos/usnationalarchives/
4727559500/

ICS introduced touch navigation, web view, voice input, and font resizing
http://developer.android.com/about/versions/android-4.0-highlights.html

Jelly Bean


JB introduced gesture support and accessibility focus management, braille support, accessibility node APIs for custom views.
Voice activated search is more powerful. http://developer.android.com/about/versions/jelly-bean.html

JB 4.2.2 introduces ability to enable/disable Talkback without sighted assistance, read full screen, and three ﬁnger tap for
zooming.

Two ladies in swimming costumes in the "Greasy Pole" competition aboard the 'Empress of Canada'


This short video shows the accessibility improvements for Jelly Bean 4.2.
These include zooming and TalkBack shortcut.
http://www.youtube.com/watch?v=LEQHyc3NMGc

Windows 8


Narrator provides touch navigation and many gestures. Zooming is built in. Should be able to install NVDA or JAWS
on tablets. Easy to enable/disable.
Uses UI Automation as the accessibility layer
http://windows.microsoft.com/en-US/windows-8/hear-text-read-aloud-with-narrator
Gymnastic group, Montreal, QC, 1891


This video shows how to enable Narrator with shortcut keys. It also shows how the basic
gestures work.
Unfortunately, it wasn’t as easy as you’d hope.

Mobile Web


Audio, Video, HTML5 form types, ARIA,
HTML5 web sites generally work well with mobile devices.
Don’t overload with -webkit preﬁxes. Remember there will be other browsers (ﬁrefox, ie10)
Expo 67

Get To Work

Unloading S.S "Durham City", Montreal, QC, 1896

Focus Control


Every action item in your app must be focusable and clickable.
Flickr photo app for iOS. Currently the rows are focusable, but not the individual thumbnails.

iOS
isAccessibilityElement
// if a UIView implements the container
protocol, it cannot be an accessible
element
- (BOOL)isAccessibilityElement
{
return NO;
}


isAccessibility deﬁnes which elements are subject to focus. This is set by default for buttons
and other actionable items. it needs to be conﬁgured with custom containers.
Don’t set the parent to YES if there are actionable children.
http://yaccessibilityblog.com/library/isaccessibility-ios-app.html


This video shows the custom view used for a selector within Quickbooks Mobile. It’s the only
thing that fails in this application.

Android
setFocusable() | isFocusable() | requestFocus()

<RelativeLayout
android:id="@+id/row_type"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:focusable="true" >


Test your app by using a bluetooth keyboard. Can you access everything?
Use the focus functions or set focusable at the layout level.

Unfocused Content


This video shows an android app that has not set focusable on the elements. The entire
container is read as a single string.

HTML5
<a> & <button>
Best:
<button>Share This</button>

Good:
<a href=”#sharethis” role=”button”>Share
This</a>

Works, but avoid:
<div role=”button” tabindex=”0”>Share
This</div>

Use the a for links. Use button for actions.
use role=”button” if you need to use a link to trigger an action.
use tabindex=”0” on non-links or buttons, such as a div.
tabindex=”-1” allows an item to receive focus via JS, but is not in the normal tab ﬂow.
the javascript for div will still need to recognize the onclick event, not mouse events.

HTML
focus()
<div id="cb" role="checkbox"> Spam</div>

var checkbox =
document.getElementById('cb');

checkbox.tabIndex = 0; // make the div
focusable

checkbox.focus();


set focus with JavaScript
This is the same approach needed to let the user know a portion of the screen has changed.
For instance, if a dropdown menu appears, place focus on the ﬁrst link.

Don’t Touch

•touchstart
•touchend
•touchmove
•touchcancel


• Screen readers intercept the touch events. You cannot depend on these events. You must provide alternate buttons.
• JellyBean theoretically works by letting two fingers be interpreted as a single touch
• iOS provides a gesture event, but it is not supported on other devices.
• Finger is placed on the screen
• Finger is removed from the screen
• Finger is moved across the screen
• Touch is cancelled before the finger is actually removed from the screen
• Kersthazen voor verkeersagent http://www.flickr.com/photos/nationaalarchief/3118323158/

Labels and Descriptions


Every non-standard button needs a label
Make sure concatenated content includes all information and it is easily understood.

Custom Buttons


This short video shows how the buttons are not labeled on the Southwest Airlines app. Sadly,
this video is almost two years old and the app is still missing labels.
http://www.youtube.com/watch?v=StI0iIufJzk

iOS
accessibilityLabel | accessibilityHint

quantity.accessibilityLabel =
@”Quantity”;
quantity.accessibilityHint =
@”Increase desired quantity.”;

accessibilityLabel : A string that succinctly identiﬁes the accessibility element.

accessibilityHint: A string that brieﬂy describes the result of performing an action on the accessibility element.

These can be set in Interface builder as well.

https://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIAccessibilityElement_Class/Reference/Reference.html

Android
contentDescription
<ImageView
android:id="@+id/local_deals"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:contentDescription=
"@string/local_deals"
android:focusable="true"
android:src="@drawable/ic_menu_local" />


use contentDescription to provide labels for Android devices.
use android:contentDescription = “@null”; for images that should be ignored.
For EditText fields, provide an android:hint attribute instead of a content description, to help users understand what content is expected
when the text field is empty. When the field is filled, TalkBack reads the entered content to the user, instead of the hint text.

HTML
<img alt=”GoPayment” ...>

<label for=”name”>Name</label>

<input title=”Search”...>

<input aria-label=”Area Code”
aria-describedby=”phoneError” ...>


Use basic, semantic HTML ﬁrst.
title attribute on input can work if you want to hide the label
aria-label works well when breaking up the text inputs
aria-describedby points to a text container that describes the input, such as an error
message.

Dynamic Values


When the user changes the quantity on this invoice, we want the user to know the subtitle
has also changed. This is a common pattern where there are dynamic changes to a screen
and we need to notify the user. This could also be for a dialog window, expanded menu, etc.

iOS
UIAccessibilityPostNotiﬁcation
-(void)helpDidClose:(ZBEHelpView *)view
{
[helpView removeFromSuperview];
helpView = nil;
[self unease];

UIAccessibilityPostNotification (
UIAccessibilityScreenChangedNotification,
statusView);
// statusView instead of nil tells this where to
place the focus.
}


iOS6 allows you to notify a screen has changed, and place focus on that element.
use UIAccessibilityLayoutChangedNotification for small changes

See WWDC 2012 Accessibility for iOS for the demo of this code https://developer.apple.com/videos/wwdc/2012/
#210

Android
AccessibilityEvent
private void announceForAccessibilityCompat(CharSequence text) {
if (!mA11yManager.isEnabled()) {
return;
}

final int eventType;
if (Build.VERSION.SDK_INT < 16) {
eventType = AccessibilityEvent.TYPE_VIEW_FOCUSED;
} else {
eventType = AccessibilityEventCompat.TYPE_ANNOUNCEMENT;
}

final AccessibilityEvent event =
AccessibilityEvent.obtain(eventType);
event.getText().add(text);
event.setClassName(AccessibleCanvas.class.getName());
event.setPackageName(mContext.getPackageName());

mA11yManager.sendAccessibilityEvent(event);
}


an AccessibilityEvent is created whenever you select an item or change focus in your UI.
more info: http://developer.android.com/training/accessibility/accessible-app.html#events

use announceForAccessibilityCompat to get built in backwards compatibility
Google has provided a great package of inaccessible/accessible code to learn more.
https://code.google.com/p/eyes-‐free/downloads/detail?name=accessibility_codelab_demos_v2_src.zip

HTML
aria-live

<div aria-live=”polite”>
Total is $5.10
</div>


aria-live alerts the user when the content within the container’s value changes. Polite waits
until the user pauses, assertive announces the change immediately.
Fine tune with aria-atomic, aria-relevant, and aria-channel
http://lists.w3.org/Archives/Public/www-archive/2008May/att-0031/WAI-
ARIA_Best_Practices_StructNav.html#LiveRegions

More Stuff


Missie Harriet Frothingham and drum, Montreal, QC, 1867

accessibilityViewIsModal (iOS5)
A Boolean value indicating whether VoiceOver should ignore
the elements within views that are siblings of the receiver.


https://developer.apple.com/library/ios/#documentation/UIKit/Reference/
UIAccessibility_Protocol/Introduction/Introduction.html#//apple_ref/doc/uid/TP40008786
Your only option in 4.3 is to iterate the entire sub-tree setting isAccessibilityElement = NO

accessibilityPerformEscape
Implement this method on an element or
containing view that can be revealed
modally or in a hierarchy. When a
VoiceOver user performs a dismiss
action, this method dismisses the view.
the popover.

https://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIAccessibilityAction_Protocol/Introduction/Introduction.html

override
accessibilityPerformEscape
on
custom
back
button

The iPad does not use a standard back button in the top left of the screen. Allow the user to
perform a scrub gesture to move back.

Detect Screen Reader

iOS
UIAccessibilityIsVoiceOverRunning();

Android
isScreenReaderActive()


This information could be passed from the native app to webview if you need to provide
alternate content.
This is helpful for skipping annoying gesture introduction screens.
This is NOT possible in desktop browsers.
You can also test for closed captions are enabled or mono audio.
http://code.google.com/p/eyes-free/source/browse/trunk/shell/src/com/google/marvin/
shell/HomeLauncher.java?spec=svn623&r=623
https://developer.apple.com/library/ios/#documentation/UIKit/Reference/
UIKitFunctionReference/Reference/reference.html#//apple_ref/c/func/
UIAccessibilityIsVoiceOverRunning


This video shows how to use the Android Lint tool to ﬁnd accessibility problems and ﬁx them
quickly.
on YouTube: http://youtu.be/OtwCe-YlD5k

Don’t Hide Your Fixes


Tell users when you make an improvement to accessibility in your release notes. Preferably
what part was ﬁxed. They want to know when things are better and will tell their friends.
Ice cased Adelie penguins after a blizzard at Cape Denison / photograph by Frank Hurley http://
www.ﬂickr.com/photos/statelibraryofnsw/2960116125/

Turn on the
screen reader


Woman reading http://www.ﬂickr.com/photos/nationalmediamuseum/2780164461/
The following slides will show how to enable screen reader on iOS and Android

Enable VoiceOver


Open settings.
Choose General
Scroll down to Accessibility

Enable VoiceOver


Scroll down and select Triple-click Home
Choose VoiceOver and go back to Accessibility Settings
Explore the accessibility options
Now you can triple click the home button to enable disable VoiceOver.
Victor Tsaran provides a good intro to using VoiceOver http://www.youtube.com/watch?
v=t60voPIY5xY

Enable TalkBack


Open Settings
Select Accessibility
Select TalkBack

Enable TalkBack


select the on/off switch and choose ok
Go back to Accessibility and choose Install web scripts (ICS) or Enhance Web Accessibility
(Jelly Bean)

Ted Drake
@ted_drake
Last-Child.com


Mobile Accessibility - Accessibility Camp Toronto

Recommended

Recommended

More Related Content

Similar to Mobile Accessibility - Accessibility Camp Toronto

Similar to Mobile Accessibility - Accessibility Camp Toronto (20)

More from Ted Drake

More from Ted Drake (20)

Recently uploaded

Recently uploaded (20)

Mobile Accessibility - Accessibility Camp Toronto