Your User Can’t Click Your Floating Action Button

And you can fix it in one line

Black Android Smartphone by Alok Sharma is licensed under Creative Commons Zero

Okay, so most Android users can click your floating action button just fine, but what about people using a screen reader on their device? Screen reader accessibility tools traverse your view in the same order as you have your elements in the XML file. Your floating action button, usually one of your main actions, generally lives at the bottom of your XML file. What does this mean in a view with a long (or infinite) list? That main call to action becomes really difficult, if not impossible, for a person using assistive technologies to access. You’ve taken an important action away from that user.

Fear not! This is really easy to fix.

<android.support.design.widget.FloatingActionButton
  ...
  android:accessibilityTraversalBefore="@+id/list_view"
  ...
/>

By adding accessibilityTraversalBefore to your XML element, you can specify to the screen reader that it should visit the floating action button before the list. With that one line, you can give your users that much better of an experience.

Keep in mind that this will only change the traversal order on devices running Lollipop and higher. If you choose to use setAccessibilityTraversalBefore when setting up your view in onCreate(), you’ll have to do a check for the SDK version.

In her talk, Android Is For Everyone, Kelly Shuster pointed out how easy is it to make our apps so much more accessible. Let’s take that extra step to delight some users.

‘Let’s change the narrative “heroic disabled person overcomes obstacles” to “society is inclusive, all can succeed”.’ - Haben Girma

Photo of Victoria Gonda

Victoria is a software developer working on mobile and full stack web applications. She enjoys exchanging knowledge through conference talks and writing.

Comments

Add a Comment

Hmm...that didn't work.

Something went wrong while adding your comment. If you don't mind, please try submitting it again.

Comment Added!

Your comment has been added to this post. Please refresh this page to view it.

Optional. If added, we will display a link to the website in your comment.
Optional. Never shared or displayed in your comment.