/* Code-Comments */

Buttons Without Style

June 05, 2019

When it comes to accessibility (a11y) on the web, one of the best / easiest things you can do is to use semantic HTML.

Structural, semantic HTML is the key starting point toward good accessibility practices.1

That means, when you want to have something be clickable, use a <button>. If it’s the top header, use <h1>. The next header should be <h2>, not <h3>, etc.

Buttons, however, often pose a problem. They’re the best way to indicate interactivity, but they come with a lot of built-in styling that may not be aligned with the style of your website.

One easy solution is to simply make a <div role="button"> with an onClick event handler.

A better solution is create a base button that is “styleless”.

While not a perfect solution (see CSS Tricks for some caveats2), the following is a good start:

.stylelessButton {
  font-size: 100%;
  font-family: inherit;
  border: 0;
  padding: 0;
  background: transparent; // Firefox
}

This will strip out the majority of the CSS that makes a button look different than what it’s around and can serve as a nice base on which to build.

Footnotes

1 Web Accessibility Guidelines - Semantic HTML | Carnegie Museums 2 Overriding Default Button Styles | CSS-Tricks


Stephen Weiss

Thanks for reading! My name's Stephen Weiss. I live in Chicago with my wife, Kate, and dog, Finn.
Click here to see the archives of my weeks in review and sign up yourself!