アクセシビリティを考慮したハンバーガーメニューの作り方

<button 
  type="button" 
  id="menu-button" 
  class="menu-button" 
  aria-expanded="false" 
  aria-controls="menu" 
  aria-label="メニューボタン"
>
  <span class="menu-button__bar"></span>
</button>

/* ボタン */
.menu-button {
  display: grid;
  place-items: center;
  place-content: center;
  ...
}

/* ボタンアイコン */
.menu-button__bar {
  ...
}

/* ボタンラベル */
.menu-button::after {
  content: "MENU";
}

[data-drawer-open="true"] .menu-button::after {
  content: "CLOSE";
}

<div id="menu" class="header__menu">
  <nav class="global-nav">
    <ul class="global-nav__list">
      <li><a href="#sec1">セクション1</a></li>
      <li><a href="#sec2">セクション2</a></li>
      <li><a href="#sec3">セクション3</a></li>
      <li><a href="#sec4">セクション4</a></li>
      <li><a href="#sec5">セクション5</a></li>
    </ul>
</div>

.header__menu {
  position: fixed;
  width: min(300px, 100%);
  height: 100%;
  padding-top: var(--header-h);
  ...
}

.global-nav {
  overflow-y: auto;
  height: 100%;
  ...
}

<header class="header">
  <div class="header__inner">
    ...
  </div>

  <div class="overlay"></div>
</header>

.overlay {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: visibility 0.3s, opacity 0.3s;

  /* オープン時 */
  [data-drawer-open="true"] & {
    visibility: visible;
    opacity: 1;
  }
}

@media (min-width: 960px) {
  .overlay {
    display: none;
  }
}

html {
  /* スクロールバーの有無によるガタつき防止 */
  scrollbar-gutter: stable;
}

body {

  /* オープン時 */
  [data-drawer-open="true"] & {
    overflow: clip;
  }
}

const html = document.documentElement;
const menuButton = document.getElementById("menu-button");
const menu = document.getElementById("menu");
const overlay = document.getElementById("overlay");

// 初期状態をセット
html.dataset.drawerOpen = "false";

// オープン時
function openMenu() {
  html.dataset.drawerOpen = "true";
  menuButton.setAttribute("aria-expanded", "true");
  menu.inert = false;
}

// クローズド時
function closeMenu() {
  html.dataset.drawerOpen = "false";
  menuButton.setAttribute("aria-expanded", "false");
  menu.inert = true; 
}

function toggleMenu() {
  html.dataset.drawerOpen === "true" ? closeMenu() : openMenu();
}

// クリックで開閉
menuButton?.addEventListener("click", toggleMenu);
overlay?.addEventListener("click", closeMenu);

// ページ内リンクをクリックしたら閉じる
menu?.querySelectorAll("a[href*='#']").forEach((link) => {
  link.addEventListener("click", () => {
    if (!menuButton?.checkVisibility()) return;
    closeMenu();
  });
});

// Escキーで閉じる
window.addEventListener("keydown", (e) => {
  if (e.key === "Escape" && html.dataset.drawerOpen === "true") {
    closeMenu();
    menuButton.focus();
  }
});

// inertのレスポンシブ対応
if (menuButton && menu) {
  const menuObserver = new ResizeObserver(() => {
    const isDrawer = menuButton.checkVisibility();
    const isOpen = html.dataset.drawerOpen === "true";

    if (isDrawer) {
      // ドロワー時は開閉状態に応じてinertを制御
      menu.inert = !isOpen;
    } else {
      // 非ドロワー時はメニューを閉じて操作可能にする
      if (isOpen) closeMenu();
      menu.inert = false;
    }
  });

  menuObserver.observe(menuButton);
}

// フォーカストラップ
function trapFocus(e) {
  if (e.key !== "Tab") return;

  const focusableSelector = `
    a[href],
    button:not([disabled]),
    input:not([disabled]),
    textarea:not([disabled]),
    select:not([disabled]),
    [tabindex]:not([tabindex="-1"])
  `;

  const focusable = [menuButton, ...menu.querySelectorAll(focusableSelector)];

  const first = focusable[0];
  const last = focusable[focusable.length - 1];

  if (!e.shiftKey && document.activeElement === last) {
    e.preventDefault();
    first.focus();
  }

  if (e.shiftKey && document.activeElement === first) {
    e.preventDefault();
    last.focus();
  }
}

function openMenu() {

  // フォーカストラップを有効化（メニュー内でフォーカスを循環）
  document.addEventListener("keydown", trapFocus);
}

function closeMenu() {

  // フォーカストラップを解除
  document.removeEventListener("keydown", trapFocus);
}