Is Google closing the gap on Apple's mobile accessibility features? Now Android has magnification support for low vision users! With Android's open app ecosystem you can even install multiple accessible web browsers like Chrome & Firefox. See & Hear a demo of the latest assistive technologies in Android JellyBean 4.3+.
http://pauljadam.com/androida11y
Accessibility Evangelist at Deque Systems, Inc.
Press the Left/Right Arrow Keys or Page Up/Down to navigate through slides, the Home key takes you home to the table of contents. Adjust text size in the Info dialog. Share this presentation on Twitter & Facebook.
This slideshow has been developed with jQuery Mobile to create a universally accessible presentation that will work on any accessibility enabled device. PowerPoint & PDF formats are not universally accessible.
TalkBack in the Google Play store.
Nexus 4 (Android 4.2+) Accessibility Help (User Guide)
TalkBack is an Accessibility Service that helps blind and vision-impaired users interact with their devices more easily.
This application add spoken, audible, and vibration feedback to your device. It is a system application that was pre-installed on most device and is updated when the accessibility service is improved.
This app is only activated if you explicitly turn on Accessibility.
Steps to activate Accessibility:
1. Go to Settings
2. Select Accessibility
3. (Android 3.2 and earlier) Enable Accessibility checkbox
4. Enable TalkBack checkboxes
5. (Android 4.0 and later) Enable explore-by-touch
Hold hand over proximity sensor to silence TalkBack as opposed to iOS 2-finger tap.
Installing scripts to enhance web accessibility is now on by default when you enable TalkBack. Progress! :)
Global Context Menu (kind of like a rotor in iOS but not)
Android JellyBean Accessibility - by Kiran Kaja @kirankaja12
Explore by touch tutorial is basically the built in TalkBack user guide.
The keyboard does not get magnified.
Enable screen magnification to easily zoom or pan the entire screen to get a closer look. Visually impaired users can now enter full-screen magnification with a triple-tap on the screen, and even type and interact with the device while zoomed in.
Use magnification gestures - Nexus 7 help
Some or all of this information applies only to Nexus 7 devices running Android 4.2.
When this feature is turned on, you can temporarily magnify what’s on your screen or use magnification mode to easily zoom and pan your screen. (For users with low vision)
Note: Triple-tap for magnification works everywhere except for the keyboard and navigation buttons.
Temporarily magnify: Triple-tap & hold.
Magnify & pan: Triple-tap & hold, then drag your finger.
Toggle magnification mode in or out: Triple tap & release, or enter or exit an app to get out of magnification mode.
While you're in magnification mode, you can:
Pan: Drag two or more fingers across the screen.
Adjust zoom level: Pinch or expand using two or more fingers.
New Magnification Features in Android 4.2.2 - YouTube Video
Magnification view does NOT follow TalkBack focus.
When you are zoomed in and open another app you lose your zoom :(
iOS does both of these items correctly.
Home row heroes: alternative keyboard apps for Android
Best Android Keyboards for Limited Dexterity (or anyone)
Best Alternative Android Keyboards for the rest of us with fat fingers, poor dexterity, arthritis, repetitive stress injuries, paralysis, and other finger/hand limitations.
Don't have to pay extra to tether like on iOS where you have to Jailbreak to do so!
Design - Patterns - Accessibility | Android Developers
48 dp is the recommended touch target size for on screen elements.
Buttons larger than the minimum recommendations are appropriate for children with developing motor skills and people with manual dexterity challenges.
Label functional UI components that have no visible text: buttons, icons, tabs with icons, and icons with state (like stars).
Use the contentDescription attribute to set the label.
Icons or controls that disappear after a certain amount of time, e.g. Video player controls that fade out after 5 seconds.
If controls fade out before a user focuses on them then a TalkBack user may not know they were there.
You can also change the behavior of your app when accessibility services are turned on, e.g make sure that timed-out controls won't disappear.
Standard Android framework controls work automatically with accessibility services and have ContentDescriptions built in by default.
User controlled system-wide large font size in Settings; using the default system font size in your application will enable the user's preferences in your app as well. Mark text and their associated containers to be measured in scale pixels.
Your app may not have room for a user's large fonts or language settings, the text may get too large for the containers that hold it and be cut off.
Turn on the TalkBack service in Settings > Accessibility and navigate your application.
Android has good support for WAI-ARIA and HTML5 Accessibility.
I think it may be possible to set a web view app to render with Mozilla's Geko (Firefox) browser engine rather than Chrome's. Firefox web views are more accessible than Chrome.
Follow WCAG 2.0 to make your websites and web view apps, e.g. PhoneGap, accessible to TalkBack users on Android.
WCAG 2.0 Checklist that links to each understanding success criterion
Accessibility Testing Checklist | Android Developers
Directional controls: Verify that the application can be operated without the use of a touch screen.
Note: Keyboards and D-pads provide different navigation paths than accessibility gestures. While gestures allow users to focus on nearly any on-screen content, keyboard and D-pad navigation only allow focus on input fields and buttons.
TalkBack audio prompts: UI controls have clear and accurate audio descriptions when TalkBack is enabled and controls are focused. Use directional controls to move focus between application layout elements.
Explore by Touch prompts: UI controls have appropriate audio descriptions when Explore by Touch is enabled. There should be no regions where contents or controls do not provide an audio description.
Touchable control sizes: All controls where a user can select or take an action must be a minimum of 48 dp (approximately 9mm) in length and width, as recommended by Android Design.
Gestures work with TalkBack enabled: Verify that app-specific gestures, such as zooming images, scrolling lists, swiping between pages or navigating carousel controls continue to work when TalkBack is enabled. If these gestures do not function, then an alternative interface for these actions must be provided.
No audio-only feedback: Audio feedback must always have a secondary feedback mechanism to support users who are deaf or hard of hearing, for example: A sound alert for the arrival of a message should also be accompanied by a system Notification, haptic feedback (if available) or another visual alert.
Repetitive audio prompting: Check that closely related controls (such as items with multiple components in a list) do not simply repeat the same audio prompt. For example, in a contacts list that contains a contact picture, written name and title, the prompts should not simply repeat “Bob Smith” for each item.
Audio prompt overloading or underloading: Check that closely related controls provide an appropriate level of audio information that enables users to understand and act on a screen element. Too little or too much prompting can make it difficult to understand and use a control.
Side Note: Twitter's android app has WAY more accessibility problems! Most all the buttons are not focusable and have no accessible names.
Focus shown trapped underneath the full screen image dialog, TalkBack is focused on the Comment button.
People Who Liked This dialog showing TalkBack speech output "Button 29 Unlabelled". The blue Friend Added Checked button and the grey Add Friend Plus buttons have no accessible names (contentDescription).
The delete Feeling Emoticon button is unlabelled.
The emoticon image should not be focusable because its text alternative is already adjacent (Feeling great). Unless you want to get more descriptive of the icon's facial expression. This image has no contentDescription so TalkBack speaks nothing when it's focused on. Focus should be removed.
The Contacts Menu/Panel button is missing an expanded or collapsed state or 2 different accessible names like "Show Contacts Panel" & "Hide Contacts Panel". Could say "Contacts, expanded, button" "Contacts, collapsed, button".
Develop - API Guides - Accessibility - Making Applications Accessible
Note: 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.
contentDescription on an EditText control is only read before text is typed into the field, once the field is emptied the contentDescription is no longer read. This is a reason why a hint is a better option. Even though both disappear as the accessible name once text is typed into the field the hint comes back into view when the field is emptied and it will be read again by TalkBack, not the case for contentDescription on EditText controls.
Labels that won't change while using the app (such as "Next" or "Purchase") can be added via the XML layout by setting a UI element's android:contentDescription attribute:
<Button
android:id=”@+id/next_button”
android:src=”@drawable/next”
android:contentDescription=”@string/next”/>
Base the content description on some context, such as the state of a toggle button, or a piece of selectable data like a list item. To edit the content description at runtime, use the setContentDescription() method:
String contentDescription = "Select " + strValues[position];
label.setContentDescription(contentDescription);
Avoid the web-developer pitfall of labelling everything with useless information. For instance, don't set an application icon's content description to "app icon". That just increases the noise a user needs to navigate in order to pull useful information from your interface.
setFocusable()
isFocusable()
requestFocus()
If a view is not focusable by default, you can make it focusable in your layout file by setting the android:focusable attribute to true or by calling the its setFocusable() method.
Each UI control has 4 attributes, android:nextFocusUp, android:nextFocusDown, android:nextFocusLeft, and android:nextFocusRight, which you can use to designate the next view to receive focus when the user navigates in that direction.
Note: You can modify the focus order of user interface components at runtime, using methods such as setNextFocusDownId() and setNextFocusRightId().
If your application requires a custom view component, you must do some additional work to ensure that your custom view is accessible. These are the main tasks for ensuring the accessibility of your view:
If you write a custom view, make sure it fires events at the appropriate times. Generate events by calling sendAccessibilityEvent(int), with a parameter representing the type of event that occurred.
As an example, if you want to extend an image view such that you can write captions by typing on the keyboard when it has focus, it makes sense to fire an TYPE_VIEW_TEXT_CHANGED event, even though that's not normally built into image views. The code to generate that event would look like this:
public void onTextChanged(String before, String after) {
...
if (AccessibilityManager.getInstance(mContext).isEnabled()) {
sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_TEXT_CHANGED);
}
...
}
@Override
public void onAccessibilityEvent(AccessibilityEvent event) {
final int eventType = event.getEventType();
String eventText = null;
switch(eventType) {
case AccessibilityEvent.TYPE_VIEW_CLICKED:
eventText = "Focused: ";
break;
case AccessibilityEvent.TYPE_VIEW_FOCUSED:
eventText = "Focused: ";
break;
}
eventText = eventText + event.getContentDescription();
// Do something nifty with this text, like speak the composed string
// back to the user.
speakToUser(eventText);
...
}
There are some cases where accessibility services cannot get adequate information from the view hierarchy. An example of this is a custom interface control that has two or more separately clickable areas, such as a calendar control. In this case, the services cannot get adequate information because the clickable subsections are not part of the view hierarchy.
In order to provide a virtual view hierarchy for a view, override the getAccessibilityNodeProvider() method in your custom view or view group and return an implementation of AccessibilityNodeProvider.
Accessibility Developer Checklist
Develop - API Guides - Accessibility - Building Accessibility Services
An accessibility service is an application that provides user interface enhancements to assist users with disabilities, or who may temporarily be unable to fully interact with a device. For example, users who are driving, taking care of a young child or attending a very loud party might need additional or alternative interface feedback.
Android provides standard accessibility services, including TalkBack, and developers can create and distribute their own services. This document explains the basics of building an accessibility service.
Making Applications Accessible | Android Developers
Accessibility Testing Checklist | Android Developers
Toast | Android Developers
A toast is a view containing a quick little message for the user. The toast class helps you create and show those.
Toast messages are spoken automatically by TalkBack. So this is when you need a message that both sighted and blind users can see or hear.
Android Accessibility
Accessibility | Android Developers
android.view.accessibility | Android Developers
Android Developers Blog: Accessibility: Are You Serving All Your Users?
Accessibility Services in Android 4.3 APIs
Making Android apps voice output accessible - by Henny Swan @iheni
Draft BBC Mobile Accessibility Standards and Guidelines
There are no traits, no hints on all elements, etc. If you want a UI element to be spoken as a "button" to TalkBack then you must use a button or image button element since there is no button trait(role).
No accessibilityViewIsModal like iOS, the API is just not nearly as robust!
EditText elements can't have both a contentDescription and a hint! And as soon as you type some text the hint or contentDescription is NOT spoken.
Android handles links embedded in a textview by using an earcon ding but no role/trait to indicate the separate elements. They're not separately focusable!
Opening local context menu gives ability to activate separate links but this is not very obvious or documented much.
TalkBack users do not hear if something is actionable unless it's a button or input element.
Tab controls do not indicate a tab role or a selected state.
android:importantForAccessibility
android:importantForAccessibility=“no"
noHideDescendants - The view is NOT important for accessibility, nor are any of its descendant views.
setImportantForAccessibility(int)
Stop images from being focusable with TalkBack by setting android:focusable=“false” or android:importantForAccessibility=“no”(which overrides :focusable on an ImageView)
View.sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_FOCUSED)
Android Accessibility Testing and Fixing in 30 seconds
Swipe down then left activates the Back button by default. This is under TalkBack settings, manage gestures.
view.announceForAccessibility("Hello TalkBack World");
Accessibility Videos from Google Developers - YouTube
Google I/O 2013 - Enabling Blind and Low-Vision Accessibility On Android
Google I/O 2013 - Advancing Web Accessibility with ChromeVox
ChromeVox for Web Accessibility
Google I/O 2012 - Advancing Accessibility for the Web
Google I/O 2012 - Making Android Apps Accessible
Google I/O 2011: Creating Accessible Interactive Web Apps using HTML5
Google I/O 2011: The YouTube Caption API, Speech Recognition, and WebVTT captions for HTML5
Google I/O 2011: Leveraging Android Accessibility APIs To Create An Accessible Experience
Google I/O 2011: Accessibility: Building Products that Everyone Can Use
Accessible Client-side Form Validation with HTML5 & WAI-ARIA Demo 2
WINNER = Firefox!!! Most robust accessibility of them all. Nightly build is the latest and greatest and supports aria-describedby. Best quick navigation options!
2nd place = Default Browser app included by default (The browser app has a special local context menu not available in Firefox, control navigation is like quick nav for form elements)
3rd place = Chrome and Dolphin, they both seem to be accessible but have similar levels of bugginess (quite a bit!)
TalkBack does tell you "edit text for telephone number" if it's an HTML5 input type=tel, have never seen this before.
Required attributes for form controls do seem to announce to TalkBack
DevBytes: Android 4.4 Closed Captioning - YouTube
Android 4.4 now supports a better accessibility experience across apps by adding system-wide preferences for Closed Captioning. Users can go to Settings > Accessibility > Captions to set global captioning preferences, such as whether to show captions and what language, text size, and text style to use.
Android 4.4 extends the accessibility APIs to support more precise structural and semantic description and observation of onscreen elements. With the new APIs, developers can improve the quality of accessible feedback by providing accessibility services with more information about on-screen elements.
In accessibility nodes, developers can now determine whether a node is a popup, get its input type, and more. You can also use new APIs to work with nodes that contain grid-like information, such as lists and tables. For example, you can now specify new supported actions, collection information, live region modes, and more.
New accessibility events let developers more closely follow the changes that are taking place in window content, and they can now listen for changes in the touch exploration mode on the device.
@@ -25,12 +25,20 @@ const char* BOOL_ATTRIBUTES[] = {
"checkable",
"checked",
"clickable",
+ "collection",
+ "collection_item",
+ "content_invalid",
"disabled",
+ "dismissable",
"editable_text",
"focusable",
"focused",
+ "heading",
+ "hierarchical",
"invisible",
+ "multiline",
"password",
+ "range",
"scrollable",
"selected"
};
@@ -41,7 +49,18 @@ const char* STRING_ATTRIBUTES[] = {
const char* INT_ATTRIBUTES[] = {
"item_index",
- "item_count"
+ "item_count",
+ "row_count",
+ "column_count",
+ "row_index",
+ "row_span",
+ "column_index",
+ "column_span",
+ "input_type",
+ "live_region_type",
+ "range_min",
+ "range_max",
+ "range_current_value",
};
}
@@ -57,17 +76,24 @@ void AccessibilityTreeFormatter::AddProperties(
dict->SetString("class", android_node->GetClassName());
// Bool attributes.
- dict->SetBoolean("focusable", android_node->IsFocusable());
- dict->SetBoolean("focused", android_node->IsFocused());
- dict->SetBoolean("clickable", android_node->IsClickable());
- dict->SetBoolean("editable_text", android_node->IsEditableText());
dict->SetBoolean("checkable", android_node->IsCheckable());
dict->SetBoolean("checked", android_node->IsChecked());
+ dict->SetBoolean("clickable", android_node->IsClickable());
+ dict->SetBoolean("collection", android_node->IsCollection());
+ dict->SetBoolean("collection_item", android_node->IsCollectionItem());
dict->SetBoolean("disabled", !android_node->IsEnabled());
- dict->SetBoolean("scrollable", android_node->IsScrollable());
+ dict->SetBoolean("dismissable", android_node->IsDismissable());
+ dict->SetBoolean("editable_text", android_node->IsEditableText());
+ dict->SetBoolean("focusable", android_node->IsFocusable());
+ dict->SetBoolean("focused", android_node->IsFocused());
+ dict->SetBoolean("heading", android_node->IsHeading());
+ dict->SetBoolean("hierarchical", android_node->IsHierarchical());
+ dict->SetBoolean("invisible", !android_node->IsVisibleToUser());
+ dict->SetBoolean("multiline", android_node->IsMultiLine());
+ dict->SetBoolean("range", android_node->IsRangeType());
dict->SetBoolean("password", android_node->IsPassword());
+ dict->SetBoolean("scrollable", android_node->IsScrollable());
dict->SetBoolean("selected", android_node->IsSelected());
- dict->SetBoolean("invisible", !android_node->IsVisibleToUser());
+ // New KitKat APIs
+ Java_BrowserAccessibilityManager_setAccessibilityNodeInfoKitKatAttributes(
+ env, obj, info,
+ node->CanOpenPopup(),
+ node->IsContentInvalid(),
+ node->IsDismissable(),
+ node->IsMultiLine(),
+ node->AndroidInputType(),
+ node->AndroidLiveRegionType());
+ if (node->IsCollection()) {
+ Java_BrowserAccessibilityManager_setAccessibilityNodeInfoCollectionInfo(
+ env, obj, info,
+ node->RowCount(),
+ node->ColumnCount(),
+ node->IsHierarchical());
+ }
+ if (node->IsCollectionItem() || node->IsHeading()) {
+ Java_BrowserAccessibilityManager_setAccessibilityNodeInfoCollectionItemInfo(
+ env, obj, info,
+ node->RowIndex(),
+ node->RowSpan(),
+ node->ColumnIndex(),
+ node->ColumnSpan(),
+ node->IsHeading());
+ }
+ if (node->IsRangeType()) {
+ Java_BrowserAccessibilityManager_setAccessibilityNodeInfoRangeInfo(
+ env, obj, info,
+ node->AndroidRangeType(),
+ node->RangeMin(),
+ node->RangeMax(),
+ node->RangeCurrentValue());
+ }
+
New features for TalkBack users in Firefox for Android 24
What’s New for TalkBack users in Firefox 25 for Android
First round of accessibility support for Android in mobile Firefox | Marco’s accessibility blog
Quick Navigation keys now in nightly builds of Firefox native for Android | Marco’s accessibility blog
Key | Description |
---|---|
a | Moves to next named anchor |
b | Moves to next button |
c | Moves to next combobox or listbox |
e | Moves to next text entry or password field |
f | Moves to next form field (button, combobox, text entry, radio button, slider, checkbox) |
g | Moves to next graphic |
h | Moves to next heading of any level |
i | Moves to next item in an unordered, ordered or definition list |
k | Moves to next hyperlink |
l | Moves to next unordered, ordered or definition list |
p | Moves to next page tab (in ARIA-enabled web apps) |
r | Moves to next radio button |
s | Moves to next separator |
t | Moves to next data table |
x | Moves to next checkbox |
How to use TalkBack support in Firefox for Android for accessibility
Buy your phone directly from Google if you want to get the latest system updates without having to wait for your cellular carrier to approve them.
If you buy an Android phone from HTC it has the HTC Sense custom UI which may have a broken accessibility experience, same problem with Samsung TouchWiz. If you have one of these carrier phones you'd have to install a custom ROM to get to a stock Google UI.
Devices on Google Play - Either get a Nexus device or a Google Play edition (HTC One or Samsung Galaxy S 4)
User alanv - Stack Overflow (Software engineer at Google working on the Android platform.)
Switching to Android full-time – an experiment by @MarcoInEnglish
If I replaced my iPhone with the Nexus 4 full-time at this point ... It would be like stepping back a few years in accessibility
ios voiceover accessibility = About 221,000 results
android talkback accessibility = About 154,000 results
Unlike Apple, all of Google's default installed apps are NOT accessible, e.g. Calendar, Gallery, Explore by touch NOT working in Voice Search.
No TalkBack spoken feedback to indicate that you must double tap outside of a popup menu to dismiss it. iOS does this.
back button changes to the dismiss keyboard button but it always just says BACK
The Jedi mind trick hover your hands over proximity sensor to silence speech :)
Shake for continuous read
Better magnification gestures, 1-finger triple tap vs 3-finger double tap on iOS... who can really fit 3 fingers on their iPhone? Better multitasking gestures with TalkBack than iOS!
This presentation and slideshow template is always evolving, most ALT text should be added and correct. Please contact me if there are any issues.
Press the Left/Right Arrow Keys or Page Up/Down to navigate through slides, the Home key takes you home to the table of contents. If you're using a screen reader you may need to use the pass through key first then hit arrow keys. Page up/down works with screen readers enabled without the need for a pass through key.
JAWS Pass Key Through, INSERT+3
NVDA NVDA+f2: pass Next Key Through