Quick tips for a fabulous FAB

The Floating Action Button (or FAB for short) is a pattern that consist of placing what is considered to be the most important action of the page at its bottom corner, as a floating button.

It is especially beloved on mobile, where it is used to keep things within thumb reach, but it comes with its own set of possible accessibility shortcomings.

The basics

The FAB (as its name implies) is a button (or a link), which should be natively coded as such to easily ensure it’s focusable and operable by keyboard (opens in a new window).

Since it usually consist of an icon-only button, be sure to provide an accessible name (opens in a new window) for it, either by using an aria-label or by adding a visually-hidden text to it.

A sticky mess

Like anything sticky or fixed-positioned (especially if text-resized (opens in a new window) or at 400% zoom (opens in a new window)) it might end covering a good chunk of the page, even making part of it unusable (for example hiding part of the footer, or the currently focused element (opens in a new window)). So, keep an eye on it.

Focus order

Last but not least, even if it’s visually “at the end of the page”, it would be almost useless if a keyboard user had to traverse the entire page to reach it. It’s whole purpose is to be always readily accessible, so let’s make it so!

The easiest solution would be to place it just after the header navigation in the DOM, but it might be a bit jarring to have the focus jump from the header to it and back to the page. So what to do?

Add it to your skip-links!

Just as you would do with your footer for the exact same reason.

This way the FAB can still sit at the end of the page in the DOM, but it will be easily reachable for keyboard users too. Easy win-win!

Conclusion

Was the whole preamble just to say “add it to your skip-links”? Maybe, but it’s a very important point that is often overlooked, and it can make a huge difference for keyboard users.

Until next time, be (and code) well!