Top Banner
Mobile Accessibility Accessibility Camp - Toronto, 2012 Ted Drake, Intuit Accessibility Saturday, November 17, 12 Hurdle race on snowshoes, Montreal, QC, 1892
58

Mobile Accessibility - Accessibility Camp Toronto

May 08, 2015

Download

Technology

Ted Drake

This presentation is similar to the version I gave at Silicon Valley Code Camp that can also be seen on Slideshare. This version introduced videos for Android 4.2 and Surface.

Visit http://last-child.com/mobile-accessibility/
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Mobile Accessibility - Accessibility Camp Toronto

Mobile Accessibility

Accessibility Camp - Toronto, 2012Ted Drake, Intuit Accessibility

Saturday, November 17, 12

Hurdle race on snowshoes, Montreal, QC, 1892

Page 2: Mobile Accessibility - Accessibility Camp Toronto

• This presentation: Slideshare.net/7mary4

• Photos from Flickr Commons

Saturday, November 17, 12

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

Page 3: Mobile Accessibility - Accessibility Camp Toronto

Screen Reader

Saturday, November 17, 12

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

Page 4: Mobile Accessibility - Accessibility Camp Toronto

Saturday, November 17, 12

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

Page 5: Mobile Accessibility - Accessibility Camp Toronto

Taters

Curds

Gravy

Poutine Readers

Saturday, November 17, 12

Screen readers, such as VoiceOver, TalkBack, and Narrator have three layersThe 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.

Page 6: Mobile Accessibility - Accessibility Camp Toronto

Braille

Saturday, November 17, 12

Young woman and man braille reading on park bench http://www.flickr.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.

Page 7: Mobile Accessibility - Accessibility Camp Toronto

Cognitive Disabilities

Saturday, November 17, 12The direct interaction between finger 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

Page 8: Mobile Accessibility - Accessibility Camp Toronto

Low Vision

Saturday, November 17, 12

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

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

Page 9: Mobile Accessibility - Accessibility Camp Toronto

Saturday, November 17, 12

Page 10: Mobile Accessibility - Accessibility Camp Toronto

Saturday, November 17, 12

Page 11: Mobile Accessibility - Accessibility Camp Toronto

Assistive CommunicationSaturday, November 17, 12

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,000http://www.youtube.com/watch?v=Tp2ROyyyqjo Toddler with apraxia Asking for Cheese and Cracker on Ipad with Proloquo2Go and ASL

Page 12: Mobile Accessibility - Accessibility Camp Toronto

Assistive CommunicationSaturday, November 17, 12

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,000http://www.youtube.com/watch?v=Tp2ROyyyqjo Toddler with apraxia Asking for Cheese and Cracker on Ipad with Proloquo2Go and ASL

Page 13: Mobile Accessibility - Accessibility Camp Toronto

Alternate Inputs

Saturday, November 17, 12

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

Page 14: Mobile Accessibility - Accessibility Camp Toronto

iOS - Android - Win8 - HTML5

Saturday, November 17, 12

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

Page 15: Mobile Accessibility - Accessibility Camp Toronto

iOS

Saturday, November 17, 12LSE Sports Day, Apple Bobbing, May 1932 http://www.flickr.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.

Page 16: Mobile Accessibility - Accessibility Camp Toronto

VoiceOver

Saturday, November 17, 12

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.flickr.com/photos/national_archives_of_norway/5476890757/

Page 17: Mobile Accessibility - Accessibility Camp Toronto

Hearing

Saturday, November 17, 12Apple is now certifying hearing aids to provide digital audio experience and minimal radio interferencesome 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 languageRoyal Bank Branch, Notre Dame Street, Montreal, QC, 1911

Page 18: Mobile Accessibility - Accessibility Camp Toronto

Guided Access

Saturday, November 17, 12Guided 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 file, Mount Royal, Montreal, QC, 1879

Page 19: Mobile Accessibility - Accessibility Camp Toronto

Android

Saturday, November 17, 12

Department Store Toy Display

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

Page 20: Mobile Accessibility - Accessibility Camp Toronto

Before Ice Cream Sandwich

Saturday, November 17, 12

http://www.flickr.com/photos/field_museum_library/3405449492/in/photostream/ Girl dressed like a bee74% 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.

Page 21: Mobile Accessibility - Accessibility Camp Toronto

Ice Cream Sandwich

Saturday, November 17, 12

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

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

Page 22: Mobile Accessibility - Accessibility Camp Toronto

Jelly Bean

Saturday, November 17, 12

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 finger tap for zooming.

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

Page 23: Mobile Accessibility - Accessibility Camp Toronto

Saturday, November 17, 12

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

Page 24: Mobile Accessibility - Accessibility Camp Toronto

Windows 8

Saturday, November 17, 12

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 layerhttp://windows.microsoft.com/en-US/windows-8/hear-text-read-aloud-with-narratorGymnastic group, Montreal, QC, 1891

Page 25: Mobile Accessibility - Accessibility Camp Toronto

Saturday, November 17, 12

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.

Page 26: Mobile Accessibility - Accessibility Camp Toronto

Mobile Web

Saturday, November 17, 12

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

Page 27: Mobile Accessibility - Accessibility Camp Toronto

Get To WorkSaturday, November 17, 12

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

Page 28: Mobile Accessibility - Accessibility Camp Toronto

Focus Control

Saturday, November 17, 12

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.

Page 29: Mobile Accessibility - Accessibility Camp Toronto

iOS isAccessibilityElement

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

Saturday, November 17, 12

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

Page 30: Mobile Accessibility - Accessibility Camp Toronto

Saturday, November 17, 12

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

Page 31: Mobile Accessibility - Accessibility Camp Toronto

Saturday, November 17, 12

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

Page 32: Mobile Accessibility - Accessibility Camp Toronto

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

Saturday, November 17, 12

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

Page 33: Mobile Accessibility - Accessibility Camp Toronto

Unfocused Content

Saturday, November 17, 12

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

Page 34: Mobile Accessibility - Accessibility Camp Toronto

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>

Saturday, November 17, 12

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 flow.the javascript for div will still need to recognize the onclick event, not mouse events.

Page 35: Mobile Accessibility - Accessibility Camp Toronto

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

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

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

checkbox.focus();

HTMLfocus()

Saturday, November 17, 12

set focus with JavaScriptThis 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 first link.

Page 36: Mobile Accessibility - Accessibility Camp Toronto

Don’t Touch

•touchstart•touchend•touchmove•touchcancel

Saturday, November 17, 12

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

Page 37: Mobile Accessibility - Accessibility Camp Toronto

Labels and Descriptions

Saturday, November 17, 12

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

Page 38: Mobile Accessibility - Accessibility Camp Toronto

Custom Buttons

Saturday, November 17, 12

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

Page 39: Mobile Accessibility - Accessibility Camp Toronto

Custom Buttons

Saturday, November 17, 12

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

Page 40: Mobile Accessibility - Accessibility Camp Toronto

iOSaccessibilityLabel | accessibilityHint

quantity.accessibilityLabel =@”Quantity”;

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

Saturday, November 17, 12accessibilityLabel : A string that succinctly identifies the accessibility element.

accessibilityHint: A string that briefly 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

Page 41: Mobile Accessibility - Accessibility Camp Toronto

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

Saturday, November 17, 12

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.

Page 42: Mobile Accessibility - Accessibility Camp Toronto

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

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

<input title=”Search”...>

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

Saturday, November 17, 12

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

Page 43: Mobile Accessibility - Accessibility Camp Toronto

Dynamic Values

Saturday, November 17, 12

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.

Page 44: Mobile Accessibility - Accessibility Camp Toronto

iOSUIAccessibilityPostNotification

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

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

Saturday, November 17, 12

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

Page 45: Mobile Accessibility - Accessibility Camp Toronto

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

Saturday, November 17, 12

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

Page 46: Mobile Accessibility - Accessibility Camp Toronto

HTMLaria-live

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

Saturday, November 17, 12

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-channelhttp://lists.w3.org/Archives/Public/www-archive/2008May/att-0031/WAI-ARIA_Best_Practices_StructNav.html#LiveRegions

Page 47: Mobile Accessibility - Accessibility Camp Toronto

More Stuff

Saturday, November 17, 12

Missie Harriet Frothingham and drum, Montreal, QC, 1867

Page 48: Mobile Accessibility - Accessibility Camp Toronto

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

Saturday, November 17, 12

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

Page 49: Mobile Accessibility - Accessibility Camp Toronto

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

Saturday, November 17, 12https://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.

Page 50: Mobile Accessibility - Accessibility Camp Toronto

Detect Screen Reader

iOSUIAccessibilityIsVoiceOverRunning();

AndroidisScreenReaderActive()

Saturday, November 17, 12

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=623https://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIKitFunctionReference/Reference/reference.html#//apple_ref/c/func/UIAccessibilityIsVoiceOverRunning

Page 51: Mobile Accessibility - Accessibility Camp Toronto

Saturday, November 17, 12

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

Page 52: Mobile Accessibility - Accessibility Camp Toronto

Don’t Hide Your Fixes

Saturday, November 17, 12

Tell users when you make an improvement to accessibility in your release notes. Preferably what part was fixed. 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.flickr.com/photos/statelibraryofnsw/2960116125/

Page 53: Mobile Accessibility - Accessibility Camp Toronto

Turn on the screen reader

Saturday, November 17, 12

Woman reading http://www.flickr.com/photos/nationalmediamuseum/2780164461/

The following slides will show how to enable screen reader on iOS and Android

Page 54: Mobile Accessibility - Accessibility Camp Toronto

Enable VoiceOver

Saturday, November 17, 12

Open settings.Choose GeneralScroll down to Accessibility

Page 55: Mobile Accessibility - Accessibility Camp Toronto

Enable VoiceOver

Saturday, November 17, 12

Scroll down and select Triple-click Home Choose VoiceOver and go back to Accessibility SettingsExplore the accessibility optionsNow 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

Page 56: Mobile Accessibility - Accessibility Camp Toronto

Enable TalkBack

Saturday, November 17, 12

Open SettingsSelect AccessibilitySelect TalkBack

Page 57: Mobile Accessibility - Accessibility Camp Toronto

Enable TalkBack

Saturday, November 17, 12

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

Page 58: Mobile Accessibility - Accessibility Camp Toronto

Ted Drake@ted_drake

Last-Child.com

Saturday, November 17, 12