本文へ移動

§23-02Help & Support

FAQ アコーディオン

よくある質問を開閉式に並べて回答を折りたたむ。

質問の一覧を素早く見渡し、気になる項目だけ開いて読める。ヘルプや料金ページの疑問解消で、問い合わせを減らしたいときに使う。

実装のポイント

開閉ボタンは aria-expanded と aria-controls でパネルと結び、見出し要素の中に置く。ページ内検索で閉じた回答も見つかるよう hidden=until-found も検討する。

特徴
  • アクセシビリティ
  • キーボード操作
デモで使っているもの
  • shadcn/ui

このパターンが効く目的