Meaningful links

Two of our sections on the homepage have buttons that look like links.

This is a very common design pattern, but there's one problem with them, which is that often, the text inside of the buttons is too vague, or even meaningless.

For example, things like "click here" or "read more" don't mean anything in isolation, they force the user to know the context of what they are reading more about, which might seem obvious, but it creates extra friction.

The problem with buttons is that we often want to keep the text inside of them short, and often we, as developers, don't have control over the copy that shows up on the screen.

That doesn't mean we can't improve things for people using assistive technologies though, by using a .sr-only or .visually-hidden class.

I like having this in a utilities layer, which I keep as my highest priority layer.

@layer utilities {
  .visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
}

<a href="#" class="button">
  Learn more
  <span class="visually-hidden">
    about mushrooms with our helpful reference guide
  </span>
</a>