Accessibility Testing for XML UIs

Creating accessible Android applications is crucial to ensure that all users, including those with disabilities, can effectively use your app. One essential aspect of accessibility is making sure that your XML layouts are properly designed and tested. Accessibility testing for XML UIs helps identify potential issues that could hinder users who rely on assistive technologies like screen readers.

Why is Accessibility Testing for XML UIs Important?

• Inclusivity: Ensures users with disabilities can use your app.
• Compliance: Adheres to accessibility standards and regulations like WCAG.
• Improved UX: Enhances overall user experience by making apps more user-friendly.
• Wider Audience: Reaches a broader user base, including users with specific needs.

Best Practices for Accessible XML Layouts

Before diving into testing, let’s cover some best practices for creating accessible XML layouts:

1. Use Content Descriptions (contentDescription)

Provide meaningful text descriptions for UI elements that don’t have text (e.g., ImageViews, ImageButtons). This helps screen readers announce the purpose of the element.

<ImageView
    android:id="@+id/my_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/my_image"
    android:contentDescription="@string/image_description" />

2. Label Form Elements (android:labelFor)

Use android:labelFor to associate a label with a form element like EditText. This helps screen readers understand the purpose of the input field.

<TextView
    android:id="@+id/name_label"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/name_label_text"
    android:labelFor="@+id/name_input" />

<EditText
    android:id="@+id/name_input"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/name_hint"
    android:inputType="textPersonName" />

3. Implement Semantic Structure (Headings and Landmarks)

Use headings (e.g., TextView with large text size) to structure your content and make it easier for users to navigate with assistive technologies. Android doesn’t have built-in semantic landmarks like HTML, but proper structure is key. You might consider using grouping elements (like LinearLayouts) with appropriate content descriptions to imply landmark-like functionality.

4. Ensure Sufficient Contrast

Make sure there is sufficient contrast between text and background colors so that users with visual impairments can read the content. You can check contrast ratios using online tools or Android Studio’s lint checks.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="This is some text"
    android:textColor="@color/text_color"
    android:background="@color/background_color" />

Make sure that the color values in colors.xml meet accessibility standards for contrast.

5. Adjust Touch Target Size

Ensure that interactive elements have large enough touch targets (at least 48×48 dp) to make them easier to interact with, especially for users with motor impairments.

<Button
    android:id="@+id/my_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:minWidth="48dp"
    android:minHeight="48dp"
    android:text="@string/button_text" />

Accessibility Testing Methods for XML UIs

Now, let’s look at various methods to test accessibility in your XML UIs:

1. Using Accessibility Scanner (Android Studio)

Android Studio provides built-in accessibility lint checks and the Accessibility Scanner. These tools help identify potential accessibility issues directly within the IDE.

How to use:

1. Open your XML layout file in Android Studio.
2. Run inspection by going to Analyze > Inspect Code.
3. Check for accessibility issues under the “Accessibility” category.

The Accessibility Scanner highlights potential problems, such as missing content descriptions or insufficient contrast.

2. Manual Testing with TalkBack

TalkBack is Android’s built-in screen reader. Manual testing with TalkBack helps you experience how a visually impaired user would interact with your app.

Steps:

1. Enable TalkBack on your Android device by going to Settings > Accessibility > TalkBack.
2. Navigate through your app and listen to how TalkBack describes each UI element.
3. Pay attention to the order in which elements are read and ensure it is logical.
4. Check if all interactive elements have meaningful descriptions.

Example Walkthrough

// Example Walkthrough for MainActivity screen in pseudo code
Enable TalkBack

Open the MainActivity screen

TalkBack announces: "Heading: Welcome to My App" // Validate that headings are read out

TalkBack announces: "Edit text, Name, double tap to edit" // Check if labelFor works
Input name

TalkBack announces: "Button, Submit, double tap to activate"

//If it reads "unlabelled button" you've missed a content description, or text!
Double tap the submit button

//If no action happens: is the button properly enabled with an onClickListener etc?

3. Using UI Automator Viewer

UI Automator Viewer is a GUI tool provided with the Android SDK that allows you to inspect the UI hierarchy of an Android application. It is useful for visually checking content descriptions, resource-ids and classnames on elements when the app is running, especially on elements that aren’t immediately visible.

Steps:

1. Connect your Android device or emulator.
2. Open UI Automator Viewer from the Android SDK tools directory.
3. UI Automator Viewer will display the UI hierarchy of the current screen.
4. Inspect each element to check for relevant attributes like contentDescription.

Code Example:

This isn’t strictly code, but rather, a demonstration of how to use UI Automator. Assume you’ve built and run the activity containing:

    <ImageView
        android:id="@+id/decorativeImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/decorative_image"
        android:contentDescription="@null" />

1. Open UI Automator Viewer
2. Click on the screenshot
3. Drill down to the decorativeImage node in the element hierarchy
4. Confirm that it has an entry for contentDescription of “@null” to ensure talkback ignores the image

4. Using Espresso Accessibility Checks

Espresso is Android’s UI testing framework. You can use Espresso to write automated UI tests that specifically check for accessibility issues.

Add the accessibility-test dependency:

androidTestImplementation 'androidx.test.espresso:espresso-accessibility:3.5.1'

Write the Accessibility Tests:

import androidx.test.espresso.Espresso.onView
import androidx.test.espresso.accessibility.AccessibilityChecks
import androidx.test.espresso.matcher.ViewMatchers.isRoot
import androidx.test.ext.junit.rules.ActivityScenarioRule
import androidx.test.ext.junit.runners.AndroidJUnit4
import org.junit.Before
import org.junit.Rule
import org.junit.Test
import org.junit.runner.RunWith

@RunWith(AndroidJUnit4::class)
class AccessibilityTest {

    @Rule
    @JvmField
    var activityRule = ActivityScenarioRule(MainActivity::class.java)

    @Before
    fun setup() {
        AccessibilityChecks.enable().setRunChecksFromRootView(true)
    }

    @Test
    fun testAccessibility() {
        onView(isRoot())
            .check(AccessibilityChecks.matchesAccessibility())
    }
}

This Espresso test enables accessibility checks and verifies that the UI complies with accessibility guidelines.

When run, this test will report accessibility violations if, for example, contentDescription is missing for an ImageView

Common Accessibility Issues and How to Fix Them

1. Missing contentDescription

Issue: ImageViews or other non-text UI elements lack a contentDescription, making them invisible to screen readers.

Fix: Add a descriptive contentDescription attribute.

<ImageView
    android:id="@+id/my_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/my_image"
    android:contentDescription="@string/my_image_description" />

2. Insufficient Contrast

Issue: Low contrast between text and background makes the content difficult to read.

Fix: Adjust text and background colors to meet accessibility contrast ratio requirements. Use a colour contrast analyzer tool such as the one built in to Chrome DevTools to find WCAG compliant values.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="This is some text"
    android:textColor="@color/accessible_text_color"
    android:background="@color/accessible_background_color" />

3. Small Touch Targets

Issue: Interactive elements have touch targets smaller than the recommended 48×48 dp.

Fix: Increase the size of the touch target or add padding to the surrounding area.

<Button
    android:id="@+id/my_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:minWidth="48dp"
    android:minHeight="48dp"
    android:text="@string/button_text" />

Conclusion

Accessibility testing for XML UIs is a critical part of Android app development. By following best practices and using available testing methods like Android Studio’s Accessibility Scanner, manual testing with TalkBack, UI Automator Viewer, and automated Espresso tests, you can identify and fix accessibility issues early in the development process. Ensuring your app is accessible not only complies with standards but also provides a better user experience for all users, enhancing the overall quality of your application.