by Rocío Amaranto

Using TalkBack, the Android screen reader, we can perform accessibility testing on any application. There are certain errors that are very common and can be solved easily in order to accurately relay information to all users, including users who have a visual impairment.

One of the most common errors is the lack of description on a button or an unlabeled button. For people who use assistive technology, it is critical that an interactive element contains an accurate description of the action it performs. Often, buttons to cancel, delete, exit, clear an input field, or perform a search are read as “Unlabeled, button”; this creates confusion for the user and does not allow them to interact with the application in the way they expect.

How do we solve this issue? Using the contentDescription attribute.

<ImageButton
android:id=”@+id/search_icon”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignParentTop=”true”
android:layout_alignParentRight=”true”
android:src=”@android:drawable/search_icon”
android:contentDescription=”@string/search_icon_description” />

(Note that in Android, strings are saved in a separate file and are called by their identifier, in this case: search_icon_description).

Another very common error is missing alternative description or alt text in images. When assessing for accessibility, we must consider if images contain information that would be relevant to a user (e.g. a graph, chart, or product information), or if the image is merely decorative. If they convey important information and this information is only visually perceptible, we must add a contentDescription attribute.

<ImageView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:src=”@drawable/my_image”
android:contentDescription=”@string/my_image_description”/>
Source

Alternatively, if our image is decorative and does not add any relevant information, it’s not necessary to add a description, and we can set the contentDescription attribute to @null.

Another option is to hide it from screen readers altogether using the importantForAccessibility attribute. This way, the image will not receive focus and will be ignored by TalkBack. This attribute has four values: auto, yes, no, noHideDescendants. In this case we must use the no option.

<ImageView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:src=”@drawable/decorative_image”
android:contentDescription=”@null”
android:importantForAccessibility=”no” />

Solving for these common accessibility issues will ensure users with vision impairments can easily and equally engage with your content. Learn more about accessibility on Android here.

 

Enjoy this post? Click here to subscribe to our blog and be the first to receive all of our newest content containing the latest on digital accessibility.