Usability, Accessibility, and the Clickable Area of Digital Buttons

Two digital buttons, side-by-side, showing comparison of clickable areas, one small with “no thank you” below it and one large with “yes, please” below it

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.

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:

Digital UI button with lots of margin around its text label

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:

Screenshot of a button amid some body copy and an arrow cursor that shows the clickable area is limited to the text area in the button

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

Screenshot of a button amid some body copy and a pointer cursor that shows the clickable area is limited to the text area in the button

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:

Digital UI button with an overlay that shows the clickable area around only the text label and a pointer cursor at the clickable area’s edge

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

Screenshot of a button amid some body copy that has been modified to remove the visual padding and a pointer cursor that shows the clickable area is limited to the text area in the button

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:

Digital UI button with an overlay that shows the clickable area that fills the entire button and a pointer cursor at the clickable area’s edge

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.

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

  1. Please click, press, or tap that clap if you enjoyed this article.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mark Wyner

Mark Wyner

252 Followers

Activist, family man, creative professional, technologist, soccer fanatic, meditator, lover, hater, potty mouth, mostly vegan.