アクセシブルなアコーディオン
見出し（h3）の中にボタンを置き、aria-expanded と aria-controls で開閉を伝える。↑↓ Home End で見出し間を移動。帯に「配送は…, 見出しレベル3, ボタン, 展開」を表示。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- ボタンは見出しの中に入れる。見出しジャンプで一覧でき、押せることも伝わる。div にクリックを付けただけでは両方失う
- 開閉状態は aria-expanded で伝える。矢印アイコンの向きは読み上げには存在しない
- パネルに role=region と aria-labelledby を付けると、ランドマーク一覧から中身へ直接飛べる
- ↑↓ での見出し移動は任意だが、10 件を超える FAQ では Tab の回数が倍になるので入れる価値がある
コード（コピーして使えます）
<div class="acx-wrap" id="acx-wrap">
<h3 class="acx-h"><button type="button" class="acx-btn" id="acx-b1" aria-expanded="true" aria-controls="acx-p1"><span>配送はいつ届きますか</span><svg class="acx-ico" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16"><path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button></h3>
<div class="acx-panel" id="acx-p1" role="region" aria-labelledby="acx-b1"><p>ご注文から 2 営業日以内に発送し、翌日〜翌々日にお届けします。時間帯指定は注文画面で選べます。</p></div>
<h3 class="acx-h"><button type="button" class="acx-btn" id="acx-b2" aria-expanded="false" aria-controls="acx-p2"><span>返品はできますか</span><svg class="acx-ico" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16"><path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button></h3>
<div class="acx-panel" id="acx-p2" role="region" aria-labelledby="acx-b2" hidden><p>未使用・到着後 14 日以内なら可能です。返送料は当店負担で、返金は 5 営業日以内に元の支払い方法へ戻します。</p></div>
<h3 class="acx-h"><button type="button" class="acx-btn" id="acx-b3" aria-expanded="false" aria-controls="acx-p3"><span>領収書は発行できますか</span><svg class="acx-ico" aria-hidden="true" width="16" height="16" viewBox="0 0 16 16"><path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button></h3>
<div class="acx-panel" id="acx-p3" role="region" aria-labelledby="acx-b3" hidden><p>注文履歴から宛名を入れて PDF を発行できます。適格請求書（インボイス）の登録番号も記載されます。</p></div>
<div class="acx-band">
<span class="acx-tag">読み上げ</span><span id="acx-sr">配送はいつ届きますか, 見出しレベル3, ボタン, 展開</span>
<span class="acx-keys" aria-hidden="true"><kbd>↑</kbd><kbd>↓</kbd><kbd>Home</kbd><kbd>End</kbd></span>
</div>
</div>