Android Web and Native Accessibility in 4.4 KitKat

Table of Contents

    Abstract

    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.

    Slideshow URL

    http://pauljadam.com/kitkata11y

    Presenter

    Paul J. Adam

    Deque Logo

    Accessibility Evangelist at Deque Systems, Inc.

    @pauljadam on Twitter

    Paul@PaulJAdam.com

    Slideshow

    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.

    Android's Accessibility Options

    kitkat a11y options

    Accessibility - Nexus Help

    TalkBack Screen Reader

    Go to Settings > Accessibility > TalkBack.

    Accessibility gestures for Android 4.1 and later (Jelly Bean)

    Display Speech Output

    Shortcut gestures in TalkBack

    To try these shortcuts, swipe using a single motion:

    Explore by Touch Tutorial

    This is basically the built in TalkBack user guide.

    Magnification Gestures

    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.

    Large Text

    Demo Android's Accessibility Features

    Native Accessibility API

    Develop - API Guides - Accessibility - Making Applications Accessible

    Labeling UI Elements

    EditText

    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.

    Develop - Training - Implementing Accessibility - Developing Accessible Applications | Android Developers

    Add Content Descriptions

    Static Labels Use XML layout android:contentDescription

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

    Dynamic Labels Use runtime method .setContentDescription()

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

    Don't overdo your labels

    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.

    Design for Focus Navigation (Directional D-Pad, & Keyboard)

    Enabling view focus

    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.

    Controlling focus order

    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().

    Common Questions/Issues with Android Native Accessibility

    How do I hide an element from TalkBack so that it does not receive focus and no accessible name is announced?

    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)

    How do I send TalkBack focus to an element so that it's announced?

    View.sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_FOCUSED)

    Are there automated accessibility testing tools for Android?

    Android Lint

    Android Accessibility Testing and Fixing in 30 seconds

    How to I send an announcement for TalkBack to speak to the user like when a screen changes?

    view.announceForAccessibility("Hello TalkBack World");

    Live Demo

    Resources from Google

    Android Accessibility
    Accessibility | Android Developers
    android.view.accessibility | Android Developers
    Android Developers Blog: Accessibility: Are You Serving All Your Users?

    WAI-ARIA

    WAI-ARIA Support Matrix

    Live Demos

    HTML5

    SADLY :( Apple does not support HTML5 validation but they do support input types. Android supports both validation and input types.

    Live Demos

    Placeholder always fails contrast by default :(

    placeholder shown failing color contrast

           ::-webkit-input-placeholder {
     color: #666;
     }
    :-moz-placeholder { /* Firefox 18- */
           color: #666; 
           }
    ::-moz-placeholder {  /* Firefox 19+ */
           color: #666; 
           }
    :-ms-input-placeholder { 
           color: #666; 
           }

    Captions

    Captions DON'T seem to work in Full Screen!

    Android 4.4 KitKat Closed Captions API

    System-wide settings for closed captioning

    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.

    HTML5 Captioned Video Example

    YouTube for Android

    YouTube's Native Android App = ONLY WORKING FULL SCREEN CC EXAMPLE!?

    CPC Closed Captioning Demo Video on YouTube

    Android Browsers

    Chrome

    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"

    Firefox

    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

    List of quick navigation keys for accessible Firefox for Android
    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

    headings navigationlandmarks quick nav

    How to use TalkBack support in Firefox for Android for accessibility

    Limitations of Android A11y API vs. iOS

    Android's Weak Accessibility API leaves it light years behind iOS/VoiceOver

    iOS accessibility API options

    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.

    local context menu links

    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.

    Good blog posts on Android's "faux" accessibility:

    Pros & Cons of Android/TalkBack vs. iOS/VoiceOver

    iOS Pros

    iOS Cons

    Android Pros

    Android Cons

    Android's Open App Eco System

    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.

    Testing Accessibility Efficiently in Web or Native Android

    Global Context Menu

    Read all commands

    Local Context Menu

    Navigating by elements, Firefox, Chrome

    Basic TalkBack Testing Methods

    1. Enable TalkBack
    2. Check the Name, Role, Value, State of each element.
    3. Set focus to all UI elements in the app and make sure the accessible name (contentDescription) makes sense. Make sure text alternatives for images match fully.
    4. If UI element is actionable should it have a role like button or tab? Static text would not have a role. (Called traits on iOS, role in WAI-ARIA)
    5. Adjustable controls like sliders must have their current Value spoken to TalkBack.
    6. Is the current state of a control spoken? E.g. is this tab the selected tab? Is this element expanded or collapsed?
    7. Images that are purely for decoration (have no function) should not be focusable.
    8. Is there proper focus management when new content appears on the screen? E.g. when a dialog appears does the TalkBack focus go into the dialog? Is it trapped in the dialog? Or is the focus still stuck underneath the dialog? Is focus lost when the dialog is closed? Does focus return to the UI element that opened the dialog? When error messages appear are the spoken automatically by TalkBack?
    9. Is the focus order logical when swiping through elements or using directional controllers? Generallly follow the visual reading order, left to right, top to bottom.
    10. Is the TalkBack user aware of gestures specific to your app that they need to know to activate content or features? If those custom gestures conflict with TalkBack is there an alternative method to acheive the same function?

    Comparing A11y of Popular Apps on Android vs. iOS

    Facebook

    Twitter

    Yelp

    Android

    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

    iOS

    The Map view pins are accessible and indicate their selected state. This is likely a limitation of google's map view API.

    The Weather Channel

    Android

    iOS

    Android Accessibility Resources

    Accessibility Videos from Google

    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

    People

    Ted Drake (@ted_drake)

    Marco Zehe (@MarcoInEnglish)

    Eitan Isaacson (@eeejay)

    StackOverflow

    User alanv - Stack Overflow (Software engineer at Google working on the Android platform.)

    Support & Discussion Groups

    eyes-free Google Group

    Upcoming Deque Sessions

    Info

    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

    Close

    Share

    Twitter Facebook Cancel