Learn the state of WAI-ARIA support in Chrome and Firefox for Android and the newest additions to Google’s growing Accessibility API. Learn how to be more efficient using and testing Accessibility with Android’s TalkBack screen reader.
http://pauljadam.com/kitkata11y
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.
Go to Settings > Accessibility > TalkBack.
Accessibility gestures for Android 4.1 and later (Jelly Bean)
To try these shortcuts, swipe using a single motion:
This is basically the built in TalkBack user guide.
Temporarily magnify: Triple-tap & hold.
Magnify & pan: Triple-tap & hold, then drag your finger.
Pan: Drag two or more fingers across the screen.
Adjust zoom level: Pinch or expand using two or more fingers.
Demo Android's Accessibility Features
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().
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
view.announceForAccessibility("Hello TalkBack World");
Live Demo
Android Accessibility
Accessibility | Android Developers
android.view.accessibility | Android Developers
Android Developers Blog: Accessibility: Are You Serving All Your Users?
SADLY :( Apple does not support HTML5 validation but they do support input types. Android supports both validation and input types.
Placeholder always fails contrast by default :(
::-webkit-input-placeholder { color: #666; }
:-moz-placeholder { /* Firefox 18- */ color: #666; }
::-moz-placeholder { /* Firefox 19+ */ color: #666; }
:-ms-input-placeholder { color: #666; }
Chrome is super buggy which is sad as it's the default browser app installed on Android. Chrome does this weird thing where as soon as I swipe to a text input the accessible name is NOT spoken and instead the keyboard appears automatically and TalkBack quickly interrupts yo to say "Showing text keyboard web view"
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
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.
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.
Global Context Menu
Read all commands
Local Context Menu
Navigating by elements, Firefox, Chrome
map view not accessible on android the + - buttons and map pins have no accessible names
map pin detail tooltips not accessible at all
Only the list view is accessible
The Map view pins are accessible and indicate their selected state. This is likely a limitation of google's map view API.
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
User alanv - Stack Overflow (Software engineer at Google working on the Android platform.)
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