SSA - アコーディオンの統一標準

SSA 標準は、アコーディオンのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を定義しています。

この標準では、アコーディオンの要素は「スポイラー」と呼ばれます。スポイラーはアコーディオンとは別のエンティティであることもありますが、単独で使用されることはほとんどありません。

構造とセマンティクス

基本は <ul> リストであり、これによりスクリーンリーダーや検索ロボットが、一連のスポイラーを関連要素の単一のリストとして認識することが保証されます。

各スポイラーは <details> を含み、その内部では厳密に以下の順序が定義されています。

1. トリガーとなる見出し
2. データを含むコンテンツ

<ul class="ssa-accordion">
  <li class="ssa-spoiler">
    <details class="ssa-spoiler__details" name="faq">
      <summary class="ssa-spoiler__summary">
        <h3 class="ssa-spoiler__title">Текст триггера</h3>
        <span class="ssa-spoiler__icon" aria-hidden="true"></span>
      </summary>
      <div class="ssa-spoiler__content">
      </div>
    </details>
  </li>
</ul>

name属性を使用すると、1つのスポイラーのみを開くことができるアコーディオンを作成できますが、すべてのスポイラーでnameの値が同じであることが条件となります。

インタラクティブ性

トリガーは<summary>要素全体です。モバイルデバイスでの操作性を考慮し、クリック領域は可能な限り大きくする必要があります。

• トリガーとコンテンツには、トリガーのクリック可能領域を広くするために、個別のパディングを設定する必要があります。
• アイコンがある場合は、視覚的なインジケーターとして機能する必要があります。アイコンがない場合は、代替となる視覚的なフィードバックが必ず必要です。

.ssa-spoiler__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
}

/* システムマーカーの非表示 */
.ssa-spoiler__summary::-webkit-details-marker { display: none; }

.ssa-spoiler__icon {
  flex-shrink: 0;
  inline-size: 24px;
  block-size: 24px;
  transition: rotate 0.3s ease-in-out;
  /* ここには background-image またはSVGが指定できます */
}

.ssa-spoiler__details[open] .ssa-spoiler__icon {
  rotate: 180deg;
}

アイコンには常に aria-hidden="true" が追加されます。これは、アイコンが装飾的な機能を持つためであり、スクリーンリーダーは「開いている/閉じている」という状態を <details> タグから直接読み取るためです。

視覚的な反応

ユーザーは、要素がアクティブまたは選択されていることを即座に理解できる必要があります。

SSA 標準では、3 種類の反応が想定されています。

• ホバー - マウスを置くと <summary> の背景がわずかに変化します。
• フォーカス - キーボードで :focus-visible を介してナビゲートすると、明確な枠が表示されます。
• オープン - アイコンがない場合、アクセントラインまたは別の背景色を使用して、開いているスポイラーを示します。

.ssa-spoiler__summary:hover {
  background-color: rgb(0 0 0 / 5%);
}

.ssa-spoiler__details[open] .ssa-spoiler__summary {
  background-color: #f8f9fa;
  border-block-end: 1px solid #eee;
}