#2 div with button role

submitted on by Schepp

Bad code

<div tabindex="-1">
  <div role="button">
    <svg width="28" height="24"> … </svg>
  </div>
</div>

Issues and how to fix them

  1. Setting button semantics explicitly using the role attribute isn’t necessary, there’s an element for that (button).
  2. You don’t need the tabindex attribute if you use a button. HTML buttons are focusable by default.
  3. A click event on a div triggers only on click. A click event on a button triggers on click and if the user presses the Enter or Space key.
  4. There’s no text alternative for the icon.

Good code

Unfortunately, there’s no native way of hiding content only visually.
The .sr-only class makes sure that content is visually hidden but still accessible to screen reader users.

.sr-only {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  margin: -1px;
}
<button>
  <span class="sr-only">Send</span>
  <svg width="28" height="24" aria-hidden="true"> … </svg>
</button>