Mark W.rites

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.

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!

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:

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:

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.

---