005_single-open
排他制御型のアコーディオンです。ある項目を開くと、それ以外の項目は自動的に閉じられ、常に最大1つの項目だけが開いている状態を保ちます。
開いている項目をもう一度クリックすれば閉じられるため、全項目が閉じている状態も許容します。
実装は snippet 001 / 004 と同じ aria-expanded + hidden パターンを継承し、JavaScript側で「他項目を全クローズしてから対象項目をトグル」する制御を加えています。
排他制御型は「読ませたい順序がある」「画面領域を1項目分しか確保できない」場面に向きます。 たとえばモバイルのFAQ・サイドメニュー・ステップ式のチュートリアル等、ユーザーの注意を1箇所に集中させたい設計に有効です。
逆に、複数項目を見比べたい・並行して情報を参照したい用途では複数同時オープン型（snippet 004 multi-open）の方が向きます。
はい。本スニペットは「常に1つは開いた状態を維持する」厳格モードではなく、開いている項目をもう一度クリックすれば閉じられる設計です。 ユーザーが「読み終わったので畳みたい」「全項目を閉じてリスト全体を俯瞰したい」というニーズにも応えるためです。
常に1つは開いた状態を維持する設計（厳格モード：開いている項目を再クリックしても閉じない）も実装可能ですが、ユーザーが任意のタイミングで畳めない不自由さを生むため、本スニペットでは採用していません。
各項目の aria-expanded をJSで切り替えることで、支援技術には個別項目の状態変化が通知されます。
WAI-ARIA Authoring Practices の Accordion パターンも、排他制御に関する追加通知（aria-live 等）を要求していません。
そのため本スニペットでは snippet 004 の一括操作のような role="status" + aria-live="polite" 領域は設けず、個別 aria-expanded の切替だけでアクセシビリティ要件を満たす設計にしています。
どちらが正解という話ではなく、コンテンツとの相性で選びます。 項目同士が独立していて並行参照したいなら 004 multi-open、ユーザーの注意を1箇所に集中させたいなら 005 single-open が向きます。
実装としては aria-expanded + hidden を真実の源とする骨格は共通で、違いは「他項目を閉じるか／閉じないか」のJS側の制御方針だけです。
そのため2つを切り替えてもCSS・HTML構造を作り直す必要はありません。