WebCraft

Home / Elements / menu

aria-expanded

A menu button that turns into a close button

CaveatIt is a button with aria-expanded, not a checkbox. A checkbox announces itself as a checkbox, and a menu toggle that reads as "checkbox, not checked" is worse than no label at all.

FallbackAnimate rotate and translate, never top. The transform pair runs on the compositor; moving top relayouts the button on every frame.

HTML + CSS 
<button aria-expanded="false">
  <span></span><span></span><span></span>
</button>

[aria-expanded="true"] span:nth-child(1) {
  translate: 0 8px; rotate: 45deg;
}

Published