Articles and essays on design, technology, and my POV of the world. For shorter bursts find me on Mastodon.

Usability, Accessibility, and the Clickable Area of Buttons

Two buttons side by side. The first shows a button with lots of padding and a pointer cursor hovering over the label, showing that it is the only clickable target. It includes a description that reads 'no, thank you.' The second shows the same button with a pointer cursor hovering over the edge of the button, showing that the entire button is clickable. It includes a description that reads 'yes, please.'

Well-intended product design can turn into a usability/accessibility nightmare. Something as simple as a button can be marked up with HTML/CSS in myriad ways. We can make sure it’s done properly with a sensible markup.

First, let’s look at the intersectionality of usability and accessibility:

  1. Large click targets are important for fully-abled people without mobility impairments because large targets make clicking easier. We don’t want to aim for a bullseye, we want to aim for a barn. This is usability.
  2. Large click targets are important for people with mobility impairments 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 accessibility.

We can give people the barn. I’ll show you how.

The first step is designing an accessible button. We give it ample margins for aesthetic and to increase its size to optimize the click target. It sure looks beautiful.

A button with lots of padding. The design is an affordance that the entire button is clickable.

Then we either build it or we hand it over to a developer. It gets marked up exactly as it looks and sent out in an HTML email. The reader is engaged and hovers their mouse over the button. But their cursor doesn’t change from an arrow to a pointer. So they think it’s not clickable:

Or so it would seem. The reader keeps moving their mouse upward, and eventually when it reaches the button label, the cursor becomes a pointer. Ohh…it is clickable!

Side by side images of buttons with lots of padding around the labels. On the first one, a default arrow cursor is hovering over the the edge of the button. On the second, a pointer cursor is hovering over the label.

There’s that cute little clickable area. Well, guess what? Cute little clickable areas are trash. They’re a bullseye in a button the size of a barn. And if that’s the reader’s target, this is what our button looks like from a code perspective:

Two buttons side by side. The first one has lots of padding around the highlighted label. The second shows the label floating with no padded design.

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 doesn’t take advantage of all that beautiful padding that was designed into it.

Sensible HTML and CSS make it possible to make the entire area of a button clickable. And it’s super easy.

Those tiny link targets happen more often than you think. And the issue is usually that an <a> tag is embedded inside of another HTML tag like a <div> or a <p>. If your HTML structure needs that, this is fine. But apply the padding to the <a> tag, not its parent. This is the key.

So let’s say our HTML looks like this:

<p class="button"><a href="https://a.com">Call to action</a></p>

Instead of this CSS:

p.button {
    background: #ec6a5b;
    padding: 4rem 5rem;
    border-radius: 2rem;
}
a {
    color: #fff;
    text-decoration: none;
}

Use this CSS:

p.button {
    background: #ec6a5b;
    border-radius: 2rem;
}
a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 4rem 5rem;
}

The key properties are moving the padding from the <p> tag to the <a> tag and applying display: block; to the <a> tag so it can make use of the padding.

The result is a clickable area that extends to each edge of the visual button:

A button with lots of padding that shows a click target that covers the entire button.

See? Super simple.

Big clickable areas are aesthetic, usable, and accessible. This is button design for the win.

(Update about the code I’ve used here: Chas Belov asked me why I didn’t use a <button> tag for this. That’s a great question. Essentially, anchors (<a> tags) and buttons serve different purposes. Links take you somewhere, while buttons perform actions. Screen readers also treat them differently, so their context matters. So whenever I reference a “button” in this article, I’m referring to links that look like buttons, serving the purpose of a call-to-action. Buttons that perform actions, such as submitting a form, should be marked up using an actual HTML button.)

#Design #Code #CSS #Accessibility #Usability #HTML

Like this? Find out when I publish new work.





Illustration of me with a content facial expression. I am wearing a wine colored beanie, teal glasses, and my long full beard is brown with gray edges. There is a dreary forest in the background.
I’m Mark Wyner, an activist, dad, husband, Designer, writer, public speaker, and Mastodon moderator. If you want me to write for you or speak at your event please say hello.