This document discusses mobile accessibility. It provides information on screen readers, braille, cognitive disabilities, low vision, alternate inputs, HTML5, iOS VoiceOver, Android accessibility, Windows Phone accessibility, and making mobile content accessible to people with disabilities. It covers topics like focus control, labels and descriptions, dynamic content updates, and detecting screen readers. The presentation aims to help developers make mobile apps and web content accessible.

1. ಮೊಬೈಲ್ ಪ್ರವೇಶ
Ted Drake, Intuit Accessibility
Bengaluru, 2013

2. • This presentation:
Slideshare.net/7mary4
• Photos from Flickr via
Creative Commons licensing
• Accessible version of talk:
last-child.com/mobile-accessibilty/

3. What is Mobile Accessibility?

4. Screen Reader

6. PuriPuri
ChickpeasChickpeas
TamarindTamarind
Puri Readers

7. Braille

8. Cognitive Disabilities

9. Low Vision

10. QuickTime™ and a
H.264 decompressor
are needed to see this picture.

11. Alternate Inputs

12. HTML5
HTML5

13. iOS

14. VoiceOver

15. Hearing

16. Guided Access

17. Android
A
N
D
R
OI
D

18. Before
Ice Cream
Sandwich
Ice Cream
Sandwich

19. Ice Cream Sandwich

20. Jelly Bean

22. Global Context Menu

24. Windows 8
• Windows 8 components are accessible
• Essentially HTML5 wrappers
• Extensive gesture support
• Verbose feedback on elements

25. Windows 8
Phone
• Narrator is not available
• High contrast setting
• Screen magnifier
• Text zoom
• Talking caller ID
• Speech commands

26. Surface and
Windows 8
Desktop

27. FireFox OS
• HTML5 apps and OS
• Open Source
• Future: screen reader,
zoom
• Build and test now with
emulator or build with
Android device

28. Mobile Web

29. ಕೆಲಸ ಮಾಡಲು
ಸಮಯ

30. Focus Control

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

32. QuickTime™ and a
H.264 decompressor
are needed to see this picture.

33. Android
setFocusable() | isFocusable() | requestFocus()
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" >

34. QuickTime™ and a
H.264 decompressor
are needed to see this picture.
Unfocused Content

35. ExploreByTouchHelper
• Introduced at Google IO 2013
• Helper class that makes it easy to create
accessible custom views
• Provides dimensions, locations, text, and
action
• Re-use classes from visual design

36. HTML5
<a> & <button>
<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>

37. <div id="cb" role="checkbox"> Spam</div>
var checkbox =
document.getElementById('cb');
checkbox.tabIndex = 0; // make the div
focusable
checkbox.focus();
HTMLfocus()
focus()

38. Don’t Touch
•touchstart
•touchend
•touchmove
•touchcancel

39. Labels and Descriptions

40. Custom Buttons

41. iOS
accessibilityLabel | accessibilityHint
accessibilityLabel | accessibilityHint
quantity.accessibilityLabel =
@”Quantity”;
quantity.accessibilityHint =
@”Increase desired quantity.”;

42. Android
contentDescription
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" />

43. HTML
<img alt=”GoPayment” ...>
<label for=”name”>Name</label>
<input title=”Search”...>
<input aria-label=”Area Code”
aria-describedby=”phoneError” ...>

44. DynamicValues

45. iOS
UIAccessibilityPostNotification
UIAccessibilityPostNotification
-(void)helpDidClose:(ZBEHelpView *)view
{
[helpView removeFromSuperview];
helpView = nil;
[self unease];
UIAccessibilityPostNotification (
UIAccessibilityScreenChangedNotification,
statusView);
// statusView instead of nil tells this where to
place the focus.
}

46. 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);
}

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

48. More Stuff

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

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

51. Detect Screen Reader
iOS
UIAccessibilityIsVoiceOverRunning();
Android
isScreenReaderActive()

52. QuickTime™ and a
H.264 decompressor
are needed to see this picture.

53. Don’t Hide Your Fixes

54. Ted DRAKE
Sr. Accessibility Engineer
Intuit Accessibility, CTO
ted_drake@intuit.com
h: last-child.com
t: @ted_drake
s: slideshare.net/7mary4
f: flickr.com/draket