アコーディオン

アコーディオンとは？

アコーディオンは、見出し（ヘッダー）を押すと、その下のパネルが開いたり閉じたりする UI です。 FAQ、設定画面、商品詳細など「普段は隠しておき、必要なときだけ開きたい」場面でよく使われます。

見た目はシンプルですが、「いま開いているのか・閉じているのか」を、目で見えない人にも伝える必要があります。ここがアクセシビリティの肝です。

なぜアクセシビリティが大事なの？

2種類のユーザーを想像すると分かりやすいです。

• キーボードだけで操作する人（マウスが使えない・使いにくい）。 見出しが <div> だと Tab でフォーカスできず、そもそも開けません。
• スクリーンリーダーを使う人（画面を音声で読む）。 ただの <div> は「ボタン」と認識されず、開閉できることも、いま開いているかも分かりません。

この2つを満たす最短ルートが、「見出しを <button> にして、aria-expanded で状態を伝える」ことです。

ライブデモ（推奨実装）

下のアコーディオンは APG に沿って実装したものです。マウスを使わず、ぜひキーボードだけで操作してみてください。

キーボード操作

必要な WAI-ARIA / ロール

実装：推奨パターン（Good）

マークアップ:

<div class="accordion">
  <h3>
    <button type="button"
            id="acc-h-1"
            aria-expanded="true"
            aria-controls="acc-p-1">
      配送について
    </button>
  </h3>
  <div id="acc-p-1"
       role="region"
       aria-labelledby="acc-h-1">
    ご注文から2〜4営業日でお届けします。
  </div>

  <h3>
    <button type="button"
            id="acc-h-2"
            aria-expanded="false"
            aria-controls="acc-p-2">
      返品・交換は可能ですか？
    </button>
  </h3>
  <div id="acc-p-2"
       role="region"
       aria-labelledby="acc-h-2"
       hidden>
    商品到着後14日以内であれば承ります。
  </div>
</div>

開閉のスクリプト（状態の同期がすべて）:

const triggers = document.querySelectorAll('.accordion button');

triggers.forEach((trigger) => {
  trigger.addEventListener('click', () => {
    const expanded = trigger.getAttribute('aria-expanded') === 'true';
    const panel = document.getElementById(
      trigger.getAttribute('aria-controls')
    );
    // 状態を反転して aria-expanded と表示を同期させる
    trigger.setAttribute('aria-expanded', String(!expanded));
    panel.hidden = expanded;
  });
});

アンチパターン（Bad）

下は <div> と onclick だけで作った「見た目だけ同じ」アコーディオンです。マウスでは動きますが、キーボードでは一切操作できません。上のデモと同じように Tab → Enter を試して、違いを体感してください。

<!-- ❌ アンチパターン -->
<div class="accordion">
  <!-- div なのでキーボードでフォーカスできない -->
  <div class="trigger" onclick="toggle('p1')">
    配送について ＋
  </div>
  <div id="p1" style="display:none">
    ご注文から2〜4営業日でお届けします。
  </div>
</div>

実装チェックリスト

• 見出しのトリガーは <button type="button"> である
• ボタンは見出し要素（<h2>〜<h4>）で囲まれている
• aria-expanded が開閉と常に一致している
• aria-controls でパネルの id を指している
• 閉じているパネルは hidden でキーボード/読み上げから外れている
• パネルに role="region" + aria-labelledby（任意・推奨）
• キーボードだけで開閉でき、フォーカスが見える（フォーカスリングを消していない）
• （任意）↑↓ Home End で見出し間を移動できる

原文（英語）:Accordion Pattern — W3C APG（新しいタブで開きます）