Announce Your Actions: Making gesture actions accessible

We’re working towards better accessibility for our Android apps here at Buffer. That’s why when we recently added a new feature to Reply, we took a little extra time to make sure it was accessible. This feature includes some swipe gestures: a user can swipe left or right on a item in a list of conversations to perform some action on that conversation.

This is great for quick management of the list, but leaves out people using TalkBack or who have motor impairments that may struggle with swipe gestures. TalkBack is an accessibility tool that people with low or no vision use. It traverses the screen, and reads aloud the elements so they can understand and navigate the app without sight. We try to keep in mind how our app interacts with this tool, and discovered that these swipe actions do not work well with it. When navigating the app this way, it does not allow for swiping. In this tutorial you can find out more about what TalkBack is and how you can try it out.This opened up an opportunity for a great conversation on how we could make this important feature accessible for more people. There were lots of great ideas shared on how we could provide other ways to access these actions. Adding a drop down menu to the item? Exposing the actions in the view after a user clicks into the conversation? We ultimately decided on showing the actions in a bottom sheet when a user long presses on the conversation. By default, this made the actions reachable for the people we were trying to solve this accessibility issue for.

If you were to turn on TalkBack at this time to try it out, you’d discover we could still make improvements. When reaching a list item you would hear “Double tap to activate. Double tap and hold to long press.” Sure, the actions are now reachable, but that information isn’t very useful. What does it mean to activate? Why should I long press?

We knew we could use AccessibilityNode.addAction() to improve our accessibility announcements, so that’s what we did. This post by Ataul Munim was a great resource for figuring out how to implement this.To start off with, we had to create an AccessibilityDelegateCompat. This is where we can specify the announcement for each action, short or long click:

class ConversationAccessibilityDelegate : AccessibilityDelegateCompat() {

override fun onInitializeAccessibilityNodeInfo(host: View, info: AccessibilityNodeInfoCompat) {
super.onInitializeAccessibilityNodeInfo(host, info)

val click = AccessibilityNodeInfoCompat.AccessibilityActionCompat(
AccessibilityNodeInfo.ACTION_CLICK,
         // “Open conversation”
host.context.getString(R.string.description_open_conversation))
val longClick = AccessibilityNodeInfoCompat.AccessibilityActionCompat(
AccessibilityNodeInfo.ACTION_LONG_CLICK,
         // “Perform conversation action”
host.context.getString(R.string.description_perform_conversation_action)) 

info.addAction(click)
info.addAction(longClick)
}
}

In our RecyclerView.Adapter is where we decided to set these actions. Since it stays the same for all items, we added it to the onCreateViewHolder() method. The main thing to pay attention to here is the call to setAccessibilityDelegate(). This is where we pass in the view and an instance of the accessibility delegate:

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
val itemView = createItemView(parent)
ViewCompat.setAccessibilityDelegate(itemView, ConversationAccessibilityDelegate())
return ConversationViewHolder(itemView)
}

Now when we run TalkBack again we hear “Double tap to open conversation. Double tap and hold to perform conversation action.” So much more informative than it was before! I hope you can use this in your apps to make them more informative and usable for people using TalkBack.

We are always striving to make our apps more accessible. Feel free to let us know if you’ve noted something we can improve to make them easier to use for you!