DEV Community

Robert Pearce
Robert Pearce

Posted on

Hello, accessibility world!

Originally posted on

Dear dia11y,

Today I started an accessibility blog!

I normally write about functional programming, but I've been doing a lot of accessibility (a11y — a…11 letters…y) work this year, and I thought it would be a good idea to write down some of the useful things I've learned.

Don't worry; these will generally be short.

For this first entry, I'd like to share about one of the most common things I come across: when to use <div>s versus <button>s versus <a>s for "clickable" elements.

Unless I have a very good reason not to follow these rules, it's very simple:

  • use <a> if it changes the window's location
  • use <button> if I can press on it and something happens
  • try to not use <div> as a trigger for anything

If I'm concerned about the default browser styling of buttons, here are CSS styles collected from around the internet that will allow me to reset a button's default styling.

.btn-reset {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  border-radius: 0;
  border: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
Enter fullscreen mode Exit fullscreen mode

If I have to use <div>, make sure I remember to read MDN's role=button page and the WAI ARIA Practices 1.2 button specification to figure out how to do it correctly. Most importantly, if I decide I'm going to try to reproduce native browser behavior that all manner of programs and devices rely on, make sure my team and I know how to test it and not break it in the future.

I must confess that I've made and continue to make many a11y mistakes, but it's in learning from our mistakes that we are able to grow.

Robert W. Pearce

Top comments (0)