Focus Management and Accessibility on iOS, Android, and HTML5

Focus on
Accessibility
Mobile Web + DevCon 2013
Ted Drake,
Intuit Accessibility
This presentation:
slideshare.net/7mary4/
Wednesday, July 17, 13
This presentation was prepared for the Mobile Web + Dev Conference 2013 in San Jose. It
focuses on the importance of controlling focus on mobile devices for accessibility

Tommy Edison, the Blind Film Critic, shows how he uses Instagram on an iphone 4s
https://www.youtube.com/watch?v=P1e7ZCKQfMA

3 Factors
http://webaim.org/standards/wcag/checklist
Here are three factors that make an application or web site accessible.

Perceivable
All content that is presented visually must also be discoverable via a screen reader or other
assistive technology.

This video shows Victor Tsaran trying to use an app that features a set of buttons that are not
focusable. He’s frustrated by the inability to begin the process.

Operable
All user interactions must be clearly labeled and react to user’s gestures.

Where’s the
power button
in this
ﬂashlight
app?
This video shows how the Flashlight app has not included labels on the buttons. This makes
the user randomly click on elements.
When an image is used as a button and does not include an accessibilityLabel, VoiceOver will
announce the image’s source, i.e. background dimmed

Understandable
Content should be readable. Don’t hide important content within background images or treat
complex information as a simple string.

Flipboard FTW!
•Labels
•Distinct elements
•Focus on new
content
This video shows how the Flipboard app is easy to understand. The content and user
interfaces are clearly labeled.

Screen
Reader
Screen reader software, such as VoiceOver, TalkBack, or Narrator provide an interface
between the user and the application.
The SR interprets the user’s gestures and the application’s output.
Gestures are unique to screen reader usage, this can be surprising for custom gestures that
detect onTouch events.

Go Native
native components already include appropriate focus behaviors. Use these and your
application will inherit the accessibility.
You will need to control focus whenever using custom elements.
The iOS and Android platforms include focus control by default.
In HTML, links and form elements natively receive focus.

The key elements for iOS accessibility are:
•setting isAccessibilityElement
•deﬁning modal views
•Grouping children
•Announcing screen changes

isAccessibilityElement
Should an element receive focus?
this can be chosen via interface builder or programatically
Make sure this is set to yes for actionable items.
Set it to false on parent containers when their children are actionable, i.e. UITableViewCell
http://developer.yahoo.com/blogs/ydn/deﬁning-isaccessibilityelement-ios-
application-53755.html

photoSet.isAccessibilityElement =YES;
Typically you will not set isAccessibilityElement to true on a UITableView. But if you want this
to act as a single actionable item, set this to true.

photoSet.isAccessibilityElement = NO;
photoSetRow.isAccessibilityElement =Yes;
this is the default behavior in iOS and you shouldn’t need to set these values.

photoSet.isAccessibilityElement = NO;
photoSetRow.isAccessibilityElement = NO;
photoSetImage.isAccessibilityElement =YES;
If your UITableViewCell has actionable items, set the cell to NO and place YES on the
individual images.
This is also commonly seen when a Webview is given focus instead of the website within it.

This video shows a custom container that includes a date picker and button. The container
has accessibility so the picker and button are not available to the user.

Modality
accessibilityViewIsModal
accessibilityViewIsModal https://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIAccessibility_Protocol/Introduction/Introduction.html
The default value for this property is NO. When the value of this property is YES, VoiceOver ignores the elements within the sibling views of the receiving view.
For example, in a window that contains sibling views A and B, setting accessibilityViewIsModal to YES on view B causes VoiceOver to ignore the elements in the view A. On the other hand, if
view B contains a child view C and you set accessibilityViewIsModal to YES on view C, VoiceOver does not ignore the elements in view A.

This short video shows how a modal window (the right panel) is not blocking elements that sit
on a different layer. The user is confused by these extraneous buttons.

shouldGroupAccessibilityChildren
VoiceOver will typically read elements in a left to right order.
Use shouldGroupAccessibilityChildren to deﬁne a group of objects that are read in a vertical
or other order.
http://developer.apple.com/library/ios/#documentation/uikit/reference/
UIAccessibility_Protocol/Introduction/Introduction.html

Statistics are
announced as a
string and then
the labels.
These should be
read as pairs.
This video shows how the content is not understandable due to the lack of grouping.

UIAccessibilityPostNotification
We need to let the user know when the screen is changing. Use UIAccessibilityPostNotiﬁcation
to announce the change.
You can also move focus to the changed area, this is helpful for modals or dropdowns.
https://developer.apple.com/library/ios/#featuredarticles/ViewControllerPGforiPhoneOS/
Accessibility/AccessibilityfromtheViewControllersPerspective.html#//apple_ref/doc/uid/
TP40007457-CH2-SW2

accessibilityLabel
ﬂashlightSwitch.accessibilityLabel = @”Turn on the light”;
Going back to the ﬂashlight example, this is how the main button would receive a label.

onTouchStart
custom gestures in JavaScript do not work with VoiceOver, as the single ﬁnger swipe is used
as a key element in VoiceOver navigation.
iOS7 introduces a single ﬁnger swipe to allow users to access the back button functionality.
Depending on where the user begins their swipe, custom JavaScript carousels and other swipe
based gestures may not work.
ALWAYS include an alternate method for your swipe gestures, such as back and forward
buttons
photo: a morality play in one act by Cassidy Curtis

Android
Android key elements:
•android:focusable
•exploreByTouchHelper class
•onFocusChange
•Grouping
•Android Lint

android:focusable
• setFocusable()
• isFocusable()
• requestFocus()
Android allows you to deﬁne the elements that are focusable and actionable with
android:focusable =”true”
When android cannot ﬁnd an element that is focusable, it will treat the parent as a single text
string.
http://developer.android.com/guide/topics/ui/accessibility/apps.html
Focus can also be programmed.

This short video shows how an Android application should work. The user should be able to
touch explore the statement and read each element uniquely.

In this video, the application has not set android:focusable on the bank statement. The entire
set of transactions are announced as a single string.

accessibilityNodeInfo
• Define a custom element
• Position
• Description
• Interaction
• Children
• Verbose code
http://developer.android.com/reference/android/view/accessibility/
AccessibilityNodeInfo.html
AccessibilityNodeInfo allows developers to define how a customer view will be identified and
its interactions.
It’s a complex set of code and can be verbose.

exploreByTouchHelper
• Introduced at GoogleIO 2013
• Only 5 abstract methods
• Wraps AccessibilityNodeProviderCompat
• Very little documentation at this point
exploreByTouchHelper was introduced at GoogleIO 2013. This helper class makes custom
elements much easier to build
http://youtu.be/ld7kZRpMGb8?t=19m44s

announceForAccessibilityCompat
public void setCanvasColor(int color) {
mCanvasColor = color;
updateSummaryText();
invalidate();
// Provide feedback to users of accessibility
// services that screen content has changed.
announceForAccessibilityCompat(mContext.getString(
R.string.announcement_canvas_color_changed,
getNameForColor(color)));
}
Announce screen changes with announceForAccessibilityCompat
send a text string with new information, such as the color or subtotal
Classes with ...Compat include backwards compatibility

Android provides a fast tool for ﬁnding errors in the code. This is especially useful for ﬁnding
objects that need a content:description.
https://www.youtube.com/watch?v=OtwCe-YlD5k

HTML5
Win8
FirefoxOS

Native Components
Links and Form Elements
Links and form elements automatically receive focus and pass events and states.
divs, spans, images, lists, and other tags do not receive focus and events are not automatic.

This video shows how an iPhone reacts to different form types. This web page uses no
javascript and only very simple CSS.
Currently, the only form input type that is not given a special interface is the color picker.
iOS6 on iPhone 4S
web page can be viewed at http://fyvr.net/a11y/html5-form-types.html

tabindex=”0 or -1”
tabindex=”0” allows an item, that normally does not receive focus, get keyboard focus. Use
this when retro-ﬁtting div-based buttons. Although it’s still better to use a button.
tabindex=”-1” removes an item from the keyboard ﬂow. However, the item can still receive
focus via javascript.
support for div based buttons without tabindex is available on mobile devices, but shouldn’t
be counted on.

.focus()

.focus()
Kitten Time
Sleep in the sink ﬂuffy
fur run attack your
ankles, faucibus sleep
in the sink enim in
viverra tail ﬂick climb
the curtains.

.focus()
Kitten Time
Sleep in the sink ﬂuffy
fur run attack your
ankles, faucibus sleep
in the sink enim in
viverra tail ﬂick climb
the curtains.
<h3 tabindex=”-1”>Kitten Time</h3>

Live Regions
<div aria-live=”polite”>
Subtotal: $12.50
</div>
Content that changes within a live region will be announced by the screen reader.
Polite waits until the user has ﬁnished typing.
Assertive will announce the change as soon as possible.
http://tink.co.uk/2012/11/accessible-forms-with-aria-live-regions/

Loading...
this video shows how hybrid apps can be confusing. Victor Tsaran is trying to use a
phonegap based app that has a silent loading notiﬁcation. He doesn’t know that it is loading
and continues to explore the screen, causing an unexpected screen to load.
Add role=”button” to links so they are announced as “button” instead of “link”
Add aria-live=”assertive” to the loading image and make sure it has alt=”loading”

Ted Drake
w: last-child.com
t: @ted_drake
s: slideshare.net/7mary4
y: youtube.com/7mary4responding
p: pinterest.com/teddrake
j: intuit.com - Intuit’s hiring: Web, iOS, Android
Thank you to Rebecca Greenberg and Victor
Tsaran for video collaborations

Focus Management and Accessibility on iOS, Android, and HTML5

More Related Content

What's hot

Viewers also liked

Similar to Focus Management and Accessibility on iOS, Android, and HTML5

More from Ted Drake

Recently uploaded

Focus Management and Accessibility on iOS, Android, and HTML5