ディスクロージャー（開閉）

ディスクロージャー（開閉）とは？

ディスクロージャーは、1つのボタンを押すと、その下の1つの領域が 開いたり閉じたりする、もっともシンプルな開閉 UI です。 「もっと見る」「詳細を表示」「FAQ の答えを開く」などでよく使われます。

アコーディオンが「複数の見出し＋複数のパネル」をまとめたものなのに対し、 ディスクロージャーはボタン1つ・領域1つの最小単位だと考えると分かりやすいです。

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

見た目だけ作ると、次の人たちが取り残されます。

• キーボードだけで操作する人。トリガーが <div> だとTab でフォーカスできず、そもそも開けません。
• スクリーンリーダーを使う人。ただの <div> は「押せるもの」と認識されず、 いま開いているのか閉じているのかも伝わりません。

解決策はシンプルです。トリガーを <button> にして、aria-expanded で開閉状態を伝えるだけです。

ライブデモ（推奨実装）

下の「もっと見る」ボタンは APG に沿った実装です。マウスを使わず、キーボードだけで操作してみてください。

キーボード操作

必要な WAI-ARIA / ロール

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

マークアップ:

<button type="button"
        id="more-btn"
        aria-expanded="false"
        aria-controls="more-region">
  もっと見る
</button>

<div id="more-region" hidden>
  <p>ここに隠していた詳しい説明が入ります。</p>
</div>

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

const trigger = document.getElementById('more-btn');
const region = document.getElementById('more-region');

if (trigger && region) {
  trigger.addEventListener('click', () => {
    const expanded = trigger.getAttribute('aria-expanded') === 'true';
    // 状態を反転して aria-expanded と表示・ラベルを同期させる
    trigger.setAttribute('aria-expanded', String(!expanded));
    region.hidden = expanded;
    trigger.textContent = expanded ? 'もっと見る' : '閉じる';
  });
}

アンチパターン（Bad）

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

<!-- ❌ アンチパターン -->
<!-- div なのでキーボードでフォーカスできず、ボタンとも認識されない -->
<div class="more" onclick="toggle()">もっと見る ＋</div>

<div id="more" style="display:none">
  <p>ここに隠していた詳しい説明が入ります。</p>
</div>

実装チェックリスト

• トリガーは <button type="button"> である
• aria-expanded が開閉と常に一致している
• aria-controls で領域の id を指している
• 閉じている領域は hidden でキーボード/読み上げから外れている
• キーボードだけで開閉でき、フォーカスが見える（フォーカスリングを消していない）
• （任意）ボタンのラベルが開閉に合わせて切り替わる

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