Curso gratuito de CSS
TÉCNICA I — aria-expanded + CSS [attr] La técnica más accesible — ARIA como fuente de verdad
// Técnica I — aria-expanded attribute

ARIA como
fuente de verdad

JS solo cambia aria-expanded. CSS lee el atributo directamente con [aria-expanded="true"]. Los atributos ARIA y los estilos son la misma fuente de verdad.

Atributo En el elemento Qué comunica
aria-expanded Botón burger Estado abierto/cerrado — lectores de pantalla lo anuncian automáticamente
aria-controls Botón burger Apunta al id del menú que controla
aria-label Botón burger Texto descriptivo del botón — cambia entre "Abrir" y "Cerrar"
role="menu" Lista de links Semantiza la lista como menú de navegación 
/* HTML — botón con atributos ARIA */
<button
  aria-expanded="false"
  aria-controls="mobile-menu"
  aria-label="Abrir menú"
  onclick="toggleMenu()"
>

/* CSS — lee el atributo directamente */
.burger-btn[aria-expanded="true"] span {
  background: var(--yellow-tape);
}
.burger-btn[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(-45deg);
}

// JS — SOLO cambia atributos ARIA
function toggleMenu() {
  const btn  = document.getElementById('burger');
  const open = btn.getAttribute('aria-expanded') === 'true';

  btn.setAttribute('aria-expanded', String(!open));
  btn.setAttribute('aria-label', open
    ? 'Abrir menú' : 'Cerrar menú');

  document.getElementById('nav-root').classList.toggle('open', !open);
}