Originally posted on https://dear-dia11y.com/hello-accessibility-world.html

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;
}

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.

Yours,
Robert W. Pearce