Button Accessibility Examples

Review the accessibility issues with applying click handlers to non-interactive elements like div and span tags

by KeepingUpToDate

HTML

<main class="flex-parent">

  <div class="flex-item-first">
    <h1>Button 1</h1>
    <button class="btn" onclick="downloadStuff()">
  Download
  </button>
  </div>

  <div>
    <h1>Button 2</h1>
    <div class="btn" onclick="downloadStuff()">
      Download
    </div>
  </div>

</main>

CSS

body {
  font-family: Arial, Helvetica, sans-serif;
}

.flex-parent {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.flex-item-first {
  margin-right: 10vw;
}

.btn {
  cursor: default;
  display: inline-block;
  font-size: 1em;
  border: none;
  border-radius: 0.25em;
  padding: 0.5em 1em;
  color: white;
  background-color: #4050B0;
}

JavaScript

function downloadStuff() {
  alert('Time to start downloading');
}