ಮೊಬೈ�ಲ್ � ಪ್ರ�ವೇಶ

Ted Drake, Intuit AccessibilityBengaluru, 2013

• This presentation: Slideshare.net/7mary4

• Photos from Flickr via Creative Commons licensing

• Accessible version of talk: last-child.com/mobile-accessibilty/

What is Mobile Accessibility?

Screen Reader

PuriPuri

ChickpeasChickpeas

TamarindTamarind

Puri Readers

Braille

Cognitive Disabilities

Low Vision

QuickTime™ and aH.264 decompressor

are needed to see this picture.

Alternate Inputs

iOS - Android - Win8 - FireFox OS

HTML5

iOS

VoiceOver

Hearing

Guided Access

AndroidANDROID

Before Ice Cream Sandwich

Ice Cream Sandwich

Jelly Bean

Global Context Menu

Windows 8

• Windows 8 components are accessible

• Essentially HTML5 wrappers

• Extensive gesture support

• Verbose feedback on elements

Windows 8 Phone

• Narrator is not available• High contrast setting• Screen magnifier• Text zoom• Talking caller ID• Speech commands

Surface and Windows 8

Desktop

FireFox OS

• HTML5 apps and OS

• Open Source

• Future: screen reader, zoom

• Build and test now with emulator or build with Android device

Mobile Web

ಕೆಲಸಮಾ�ಡಲ�ಸಮಯ

Focus Control

iOS isAccessibilityElem

ent// if a UIView implements the container protocol, it cannot be an accessible element

- (BOOL)isAccessibilityElement{    return NO;}

QuickTime™ and aH.264 decompressor

are needed to see this picture.

AndroidsetFocusable() | isFocusable() |

requestFocus()

<RelativeLayoutandroid:id="@+id/row_type"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_margin="2dp"

android:focusable="true" >

QuickTime™ and aH.264 decompressor

are needed to see this picture.

Unfocused Content

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

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>

<div id="cb" role="checkbox"> Spam</div>

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

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

checkbox.focus();

HTMLfocus()

Don’t Touch

•touchstart•touchend•touchmove•touchcancel

Labels and Descriptions

Custom Buttons

iOSaccessibilityLabel |

accessibilityHint

quantity.accessibilityLabel =@”Quantity”;

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

AndroidcontentDescription

<ImageViewandroid: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" />

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

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

<input title=”Search”...>

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

Dynamic Values

iOSUIAccessibilityPostNotific

ation

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

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

AndroidAccessibilityEvent

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

HTMLaria-live

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

More Stuff

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

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.

Detect Screen Reader

iOSUIAccessibilityIsVoiceOverRunning();

AndroidisScreenReaderActive()

QuickTime™ and aH.264 decompressor

are needed to see this picture.

Don’t Hide Your Fixes

Ted DRAKESr. Accessibility EngineerIntuit Accessibility, CTOted_drake@intuit.com

h: last-child.comt: @ted_drakes: slideshare.net/7mary4f: flickr.com/draket