Usability, Accessibility, and the Clickable Area of Digital Buttons

I want to tell you a story about how the usability and accessibility of a well-designed button can go south, and how you can avoid it with a sensible coding approach. But first, let me tell you why this is important. It’s simple, really:

1. People with no movement disabilities enjoy a large clickable space because large targets make clicking easier. We don’t want to aim for a bullseye, we want to aim for a barn. This is called usability.
2. People with movement disabilities enjoy a large clickable space because positioning a cursor over a target requires considerable effort. They don’t want to aim for a bullseye, they need to aim for a barn. This is called accessibility.

So, the story.

Some UI designer somewhere designs a button with ample margins so it not only looks beautiful but also affords people a giant clickable target. It looks like this:

Then the design is realized with CSS in an HTML environment, either by the UI designer or by a third-party UI developer. In turn, the button is deployed in an email. The recipient goes to click the button when they suddenly discover that it’s not clickable:

Or so it would seem. The recipient continues moving the mouse upward, towards the creamy center of the button (the label itself), when finally…

BAM! There’s the clickable area. Look how cute and tiny it is. But cute and tiny is trash when it comes to the usability and accessibility of a button. Essentially, this is our target:

And if that’s our target, this is what our button actually looks like from a code perspective:

Ouch.

This is where coding has diminished the integrity of the button. Not visually, because the button looks how it was designed, but functionally, because it misses an opportunity to be both usable and accessible in addition to being beautiful.

Sensible HTML and CSS make it possible to make the entire area of a button clickable. I won’t get into the technique here, but I’ve been writing UI code for over two decades and I can tell you that this is really easy. What’s important is that we have a clickable button that functions as it was designed, with a target that looks like this:

Ahh…that’s better. And we can get there as a team with a few simple rules:

1. UI designers, if you have designed buttons that are aesthetically sound and have lots of padding around their labels, congratulations on taking the first step to usability/accessibility. Now fight for your design when it comes to fruition. Cite the reasons that your design is important.
2. UI developers, use appropriate HTML/CSS structures to capture the integrity of a usable/accessible button. If you are also the UI designer, hone your coding craft. This is important if you’re taking on the responsibility of both.
3. QA testers, note the clickable area and demand that it spans the entire surface of a button.

That’s it. Big clickable areas that are aesthetic, usable, and accessible. This is button design for the win.

1. Please click or tap that clap if you enjoyed this article.
2. View my site to learn more about me and my work in UX/IA/research.
3. Say hello if you want hire me for a project or speak at your event.