Så bygger du en tillgänglig hamburgermeny med CSS

På en smal mobilskärm tar logotypen och länkarna snabbt slut på utrymme, så en menyknapp kan ge sidhuvudet lugnare form. CSS för en hamburgermeny sköter utseendet och den responsiva layouten, men själva öppningen kräver också en lösning för interaktion. Den skillnaden avgör om knappen fungerar för fler än den som klickar med musen.

CSS ritar knappen, men behöver hjälp med öppet och stängt

Tre streck går snabbt att lägga till. Den svårare delen är att se till att knappens utseende och navigeringens faktiska läge aldrig säger emot varandra. CSS ansvarar för presentationen; ett klick måste också ändra vilket innehåll som visas.

Jag tycker att en vanlig knapp med en liten JavaScript-funktion är det tydligaste valet för en typisk webbplats. Du får en riktig knapp som fungerar med tangentbord, och du kan synka det synliga läget med aria-expanded. W3C:s exempel på navigering med disclosure-knappar använder det mönstret utan att lägga till ARIA-rollen menu, som inte behövs för en vanlig lista med webbplatslänkar.

Välj brytpunkt där länkarna slutar få plats

En brytpunkt ska lösa ett layoutproblem, inte följa en lista över telefonstorlekar. Om logotypen, länkarna och eventuella knappar börjar trängas på samma rad är det där du ska låta navigeringen växla till mobilvarianten. Prova sidhuvudet i flera bredder, även precis före och efter brytpunkten.

Här är ett grundexempel. Värdet i mediafrågan är avsiktligt ett startvärde, inte en universell standard; höj eller sänk det när din egen navigation visar behovet.

  Företag

  
    Meny
    
      
      
      
    
  

  

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.site-nav {
  display: none;
  flex-basis: 100%;
}

.menu-toggle[aria-expanded="true"] + .site-nav {
  display: block;
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0.75rem 0;
}

.site-nav a {
  display: block;
  padding: 0.75rem;
}

.burger {
  display: grid;
  gap: 5px;
  width: 24px;
}

.burger span {
  height: 2px;
  background: currentColor;
}

@media (min-width: 48rem) {
  .menu-toggle {
    display: none;
  }

  .site-nav {
    display: block;
    flex-basis: auto;
  }

  .site-nav ul {
    display: flex;
    gap: 1rem;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

CSS-regeln visar navigeringen när knappen har aria-expanded="true", men någon måste ändra attributet. Den här korta JavaScript-koden gör det vid aktivering:

const toggle = document.querySelector(".menu-toggle");

toggle.addEventListener("click", () => {
  const isOpen = toggle.getAttribute("aria-expanded") === "true";
  toggle.setAttribute("aria-expanded", String(!isOpen));
});

Knapp och navigation ligger intill varandra i HTML, eftersom CSS-väljaren ovan bygger på just den ordningen. Om du flyttar ett element behöver du uppdatera väljaren också; annars kan knappen ändra attribut utan att menyn visas.

En riktig knapp löser flera tillgänglighetsproblem samtidigt

En hamburgarikonen ensam förklarar inte alltid vad kontrollen gör. Lägg därför en begriplig text i knappen, synlig eller visuellt dold, och behåll en tydlig fokusmarkering så att tangentbordsanvändare ser var de befinner sig. Enter och mellanslag ska kunna öppna och stänga menyn, vilket en vanlig HTML-knapp redan stöder.

När menyn öppnas ska aria-expanded bli true; när den stängs ska värdet återgå till false. WAI-ARIA Authoring Practices Guides disclosure-mönster beskriver dessa tillstånd och tangentbordsbeteendet. Kopplingen till menyn kan anges med aria-controls, som pekar på navigationens id.

Testa också vad som händer när någon öppnar menyn och sedan trycker på en länk. På en vanlig webbplats leder länken vidare till en ny sida och menyn försvinner vid sidladdningen; i en app eller en ensideslösning kan du behöva stänga den uttryckligen. W3C:s vägledning om menystruktur rekommenderar semantisk listmarkup, vilket gör navigeringen lättare att förstå för hjälpmedel.

Välj lösning efter hur mycket interaktion du behöver

För en enkel mobilmeny finns tre rimliga vägar, men de passar olika behov. Om du redan har JavaScript i projektet är knappmönstret ovan oftast lättast att hålla synkat och bygga vidare på.

En CSS-lösning utan JavaScript kan fungera för enklare fall, exempelvis med HTML-elementet details och dess summary. En dold checkbox kan också styra utseendet, men jag skulle välja den metoden bara när begränsningarna är kända och tangentbords- och skärmläsarbeteendet testas noga. För ett vanligt navigeringsfält är ett riktigt knappselement enklare att förstå och underhålla.

Håll animationen diskret och lätt att stänga av

En liten övergång kan göra öppningen mjukare, men stora förflyttningar tillför sällan något till en meny med några få länkar. Om du animerar ikonen till ett kryss, kontrollera att strecken möts i mitten och att ikonen inte är den enda signalen om att menyn är öppen.

Du kan låta användarens systeminställning styra om övergången används. MDN:s dokumentation om prefers-reduced-motion beskriver hur CSS kan känna av inställningen för minskad rörelse.

.burger span {
  transition: transform 180ms ease, opacity 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .burger span {
    transition: none;
  }
}

Håll även knappens fokusmarkering synlig och se till att tryckytan inte krymper till själva strecken. En lugn ikon, tydligt namn och korrekt tillstånd hjälper mer än en avancerad transformation.

En snabb kontroll före publicering

När menyn ser rätt ut på din skärm återstår ett enkelt men avslöjande test: använd sidan utan mus. Öppna knappen med tangentbordet, följ länkarna med Tab och kontrollera att den synliga menyn och knappens tillstånd stämmer överens hela vägen.

Om navigationen fortfarande fungerar på både smal och bred skärm, om fokus syns och om animationen följer inställningen för minskad rörelse har du en stabil grund. Börja med funktionen och läsbarheten; den snygga hamburgerikonen kan komma efteråt.