How to ensure your buttons are accessible on mobile

Hover over each of these buttons, notice anything?

You shouldn't, these are regular buttons with a standard touch target.

Next, hover over each of these buttons below; which one is different? What is different?

One of these buttons has a class of touch-hitbox which makes it's touch target larger than the other buttons. If you didn't notice, hover on the outside of each button and you should see what I'm talking about.What is this class doing that allows that and why should we care?

Not clear enough? Here's a demo:

See the red border? That's the touch target. The button is the same size as the other buttons, but the touch target is larger. What is this class doing that allows that and why should we care?

The touch-hitbox utility class creates a 44x44px invisible button behind the button you see. This ::before pseudo-element cannot be clicked, but an invisible overlay can. This meets WCAG touch target size requirements without changing button appearance.

This is incredibly useful on mobile devices where your buttons may not be large enough to meet those standards, and you don't want to ruin your design or layout.

@utility touch-hitbox {
  position: relative;

  &::before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    pointer-events: auto;
    background-color: transparent;
    z-index: 9999;
  }
}

While this is okay with a mouse or trackpad, it becomes a problem with a touch screen. Not to mention, all of the buttons you've seen so far have been scaled to 200% of their normal size. Below are examples at their regular size.

While you can still click these easily, it's not ideal for your mobile users which still accounts for majority of web traffic. Across all websites, mobile/touch devices account for 63–65% of all web traffic. In certain sectors, like e-commerce, that number is even higher — up to 71.8%!

If we add some gap to the containing div, suddenly the middle button has a much larger area to hit.

As you can see, even though there is still some overlap, you can still click and tap the button you want.