mobile accessibility

of 54 /54
ಮಮಮಮಮಮ ಮಮಮಮಮಮ Ted Drake, Intuit Accessibility Bengaluru, 2013

Upload: ted-drake

Post on 21-Jan-2015

555 views

Category:

Design


9 download

Embed Size (px)

DESCRIPTION

This variation of an earlier mobile accessibility presentation was given to engineers at Intuit's Bangalore office. It has been updated with new information on Android, FirefoxOS, and Windows8

TRANSCRIPT

Page 1: Mobile Accessibility

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

Ted Drake, Intuit AccessibilityBengaluru, 2013

Page 2: Mobile Accessibility

• This presentation: Slideshare.net/7mary4

• Photos from Flickr via Creative Commons licensing

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

Page 3: Mobile Accessibility

What is Mobile Accessibility?

Page 4: Mobile Accessibility

Screen Reader

Page 5: Mobile Accessibility
Page 6: Mobile Accessibility

PuriPuri

ChickpeasChickpeas

TamarindTamarind

Puri Readers

Page 7: Mobile Accessibility

Braille

Page 8: Mobile Accessibility

Cognitive Disabilities

Page 9: Mobile Accessibility

Low Vision

Page 10: Mobile Accessibility

QuickTime™ and aH.264 decompressor

are needed to see this picture.

Page 11: Mobile Accessibility

Alternate Inputs

Page 12: Mobile Accessibility

iOS - Android - Win8 - FireFox OS

HTML5

Page 13: Mobile Accessibility

iOS

Page 14: Mobile Accessibility

VoiceOver

Page 15: Mobile Accessibility

Hearing

Page 16: Mobile Accessibility

Guided Access

Page 17: Mobile Accessibility

AndroidANDROID

Page 18: Mobile Accessibility

Before Ice Cream Sandwich

Page 19: Mobile Accessibility

Ice Cream Sandwich

Page 20: Mobile Accessibility

Jelly Bean

Page 21: Mobile Accessibility
Page 22: Mobile Accessibility

Global Context Menu

Page 23: Mobile Accessibility
Page 24: Mobile Accessibility

Windows 8

• Windows 8 components are accessible

• Essentially HTML5 wrappers

• Extensive gesture support

• Verbose feedback on elements

Page 25: Mobile Accessibility

Windows 8 Phone

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

Page 26: Mobile Accessibility

Surface and Windows 8

Desktop

Page 27: Mobile Accessibility

FireFox OS

• HTML5 apps and OS

• Open Source

• Future: screen reader, zoom

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

Page 28: Mobile Accessibility

Mobile Web

Page 29: Mobile Accessibility

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

Page 30: Mobile Accessibility

Focus Control

Page 31: Mobile Accessibility

iOS isAccessibilityElem

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

- (BOOL)isAccessibilityElement{    return NO;}

Page 32: Mobile Accessibility

QuickTime™ and aH.264 decompressor

are needed to see this picture.

Page 33: Mobile Accessibility

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

Page 34: Mobile Accessibility

QuickTime™ and aH.264 decompressor

are needed to see this picture.

Unfocused Content

Page 35: Mobile Accessibility

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

Page 36: Mobile Accessibility

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>

Page 37: Mobile Accessibility

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

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

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

checkbox.focus();

HTMLfocus()

Page 38: Mobile Accessibility

Don’t Touch

•touchstart•touchend•touchmove•touchcancel

Page 39: Mobile Accessibility

Labels and Descriptions

Page 40: Mobile Accessibility

Custom Buttons

Page 41: Mobile Accessibility

iOSaccessibilityLabel |

accessibilityHint

quantity.accessibilityLabel =@”Quantity”;

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

Page 42: Mobile Accessibility

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

Page 43: Mobile Accessibility

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

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

<input title=”Search”...>

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

Page 44: Mobile Accessibility

Dynamic Values

Page 45: Mobile Accessibility

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

Page 46: Mobile Accessibility

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

Page 47: Mobile Accessibility

HTMLaria-live

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

Page 48: Mobile Accessibility

More Stuff

Page 49: Mobile Accessibility

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

Page 50: Mobile Accessibility

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.

Page 51: Mobile Accessibility

Detect Screen Reader

iOSUIAccessibilityIsVoiceOverRunning();

AndroidisScreenReaderActive()

Page 52: Mobile Accessibility

QuickTime™ and aH.264 decompressor

are needed to see this picture.

Page 53: Mobile Accessibility

Don’t Hide Your Fixes

Page 54: Mobile Accessibility

Ted DRAKESr. Accessibility EngineerIntuit Accessibility, [email protected]

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