#26 HTMHell special: tasty buttons

The second HTMHell special focuses on another highly controversial pattern in front-end development:

🔥 the burger button. 🔥

The burger button and his tasty friends (kebab, meatball and bento) usually reveal a list of links when activated. According to our studies, these buttons are highly optimized for mouse and touch users, but lack support for keyboard and screen reader users in most cases.

After less than 1 hours of research, HTMHell presents a collection of 18 different bad practices found on real websites.

#Pattern 1: the unsemantic burger Pattern 1: the unsemantic burger

<div class="burger">
  <span></span>
  <span></span>
  <span></span>
</div>

.burger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 20px;
  cursor: pointer;
}

.burger span {
  height: 1px;
  display: block;
  background: #000;
}

#Issues and how to fix them Issues and how to fix them

1. The <div> element is an element of last resort, for when no other element is suitable. Use of the <div> element instead of more appropriate elements leads to poor accessibility. If you need a button, use the <button> element.
2. 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.
3. A div isn’t keyboard focusable.
4. There’s no text label.
5. The “button” should indicate whether the element it controls is currently expanded or collapsed (aria-expanded="false" if collapsed).
6. Screen readers announce: Nothing.

#Other variations of this pattern Other variations of this pattern

The empty burger

<div class="burger"></div>

The all div burger

<div class="burger">
  <div></div>
  <div></div>
  <div></div>
</div>