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.
  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:

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.
  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.

Please comment if you’d like to see some HTML and CSS to accomplish this technique of creating usable/accessible buttons. I didn’t want this article to be a coding piece, but I am happy to share my approach.

Meditator, experience designer, technologist, international public speaker, writer, family man, soccer addict, activist ✊🏻