検索フィルター付きFAQセクション
このパーツは、入力欄でキーワードを打つとFAQが即座に絞り込まれる検索フィルター付きアコーディオンです。各質問は button と隠し回答（ hidden 属性付きの回答ブロック）の組で構成され、 aria-expanded で開閉状態を持ちます。
このパーツの使いどころと実装ポイント
このパーツは、入力欄でキーワードを打つとFAQが即座に絞り込まれる検索フィルター付きアコーディオンです。各質問はbuttonと隠し回答（hidden属性付きの回答ブロック）の組で構成され、aria-expandedで開閉状態を持ちます。質問が多くなりがちなサポートページで、ユーザーが目的の答えに最短でたどり着けるのが利点です。
向いている場面
- 項目数が10件を超えるサービスのよくある質問ページ
- 料金・解約・配送など問い合わせが集中するEC・SaaSのヘルプ
- 導入前の不安を解消したいBtoBサービスの下層ページ
カスタマイズと注意
絞り込みは質問文に対する部分一致が基本なので、回答本文も検索対象に含めると取りこぼしが減ります。該当0件のときはfsf__emptyのメッセージを必ず表示し、ユーザーを迷子にしないようにします。質問が増えても見出し階層はh21本に保ち、各質問はボタン要素のままにしてキーボード操作とスクリーンリーダーの読み上げを確保します。検索欄はtype="search"を使い、ラベルかプレースホルダで用途を明示します。
このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。
よくある質問
検索でヒットしないと質問が全部消えてしまいます。どう防ぎますか？
絞り込みの対象を質問文だけでなく回答本文にも広げ、表記ゆれ（半角・全角、ひらがな・カタカナ）を吸収する正規化を入れると取りこぼしが減ります。0件のときは空メッセージを表示して、検索条件を消すための説明を添えると親切です。
JavaScriptがオフの環境でも使えますか？
検索の絞り込みと開閉はJavaScriptに依存します。オフの環境ではすべての質問を最初から開いた状態で表示するなど、内容自体は読めるフォールバックを用意しておくと安心です。