On the crime details screen, press the image capture button to give it accessibility focus (Figure 19.6). TalkBack announces, “Button unlabeled. Double-tap to activate.” (You may get slightly different results depending on the version of Android you are using.)

Figure 19.6  Image capture button selected

The camera button does not display any text, so TalkBack describes the button as well as it can. While this is TalkBack’s best effort, the information is not very helpful to a user with a vision impairment.

Luckily, this problem is very easy to fix. You are going to specify details for TalkBack to read by adding a content description to the ImageButton. A content description is a piece of text that describes the widget and is read by TalkBack. (While you are at it, you are going to add a content description for the ImageView that displays the selected picture, too.)

You can set a widget’s content description in the XML layout file by setting a value for the attribute android:contentDescription. That is what you are going to do next. You can also set it in your UI setup code, using someView.setContentDescription(someString), which you will do later in this chapter.

The text you set should be meaningful without being overly wordy. Remember, TalkBack users will be listening to the audio, which is linear. They can speed up the pace of TalkBack’s speech output, but even so you want to avoid adding extraneous information and wasting users’ time. For example, if you are setting the description for a framework widget, avoid including information about what kind of widget it is (e.g., a button), because TalkBack already knows and includes that information.

First, some housekeeping. Add the following strings to the unqualified strings.xml.

<resources>
    ...
    <string name="crime_details_label">Details</string>
    <string name="crime_solved_label">Solved</string>
    <string name="crime_photo_button_description">Take photo of crime scene</string>
    <string name="crime_photo_no_image_description">
        Crime scene photo (not set)
    </string>
    <string name="crime_photo_image_description">Crime scene photo (set)</string>
    ...
</resources>

Next, open res/layout/fragment_crime.xml and set the content description for both the ImageButton and ImageView.

<ImageView
    android:id="@+id/crime_photo"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:background="@android:color/darker_gray"
    android:cropToPadding="true"
    android:scaleType="centerInside"
    android:contentDescription="@string/crime_photo_no_image_description" />

<ImageButton
    android:id="@+id/crime_camera"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@android:drawable/ic_menu_camera"
    android:contentDescription="@string/crime_photo_button_description" />

Run CriminalIntent and press the camera button. TalkBack helpfully announces, “Take photo of crime scene button. Double-tap to activate.” This spoken information is much more helpful than “button unlabeled.”

Next, press the crime scene image (which at the moment is just the gray placeholder). You might expect the accessibility focus to move to the ImageView, but the green border appears around the entire fragment and TalkBack announces overview information about the fragment instead of about the ImageView. What gives?

The problem is that the ImageView is not registered to receive focus. Some widgets, such as Buttons and CheckBoxes, are focusable by default. Other widgets, such as TextViews and ImageViews, are not. You can make a view focusable by setting its android:focusable attribute to true or by adding a click listener.

Make the crime photo’s ImageView focusable by explicitly setting focusable to true in the layout XML.

<ImageView
  android:id="@+id/crime_photo"
  ...
  android:contentDescription="@string/crime_photo_no_image_description"
  android:focusable="true" />

Run CriminalIntent again and press on the crime photo. The ImageView now accepts focus and TalkBack announces, “Crime scene photo (not set)” (Figure 19.7).

Figure 19.7  Focusable ImageView