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

定義

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

この標準でのアコーディオン要素はスポイラーと呼ばれます。スポイラーはアコーディオンから独立した要素になることもありますが、個別に使用されることはほとんどありません。

構造とセマンティクス

アコーディオンの基本となるのは <ul> リストであり、これにより、支援技術がスポイラーのグループを関連する要素の単一のリストとして認識できるようになります。各 <li> の内部には <details> タグが配置されており、このタグには必ず見出し <summary> とコンテンツ領域 <div> が含まれています：

<ul class="accordion">
  <li>
    <details class="spoiler" name="faq">
      <summary class="spoiler__trigger">
        <h3 class="spoiler__title">トリガーテキスト</h3>
        <span class="spoiler__icon" aria-hidden="true"></span>
      </summary>
      <div class="spoiler__content"></div>
    </details>
  </li>
</ul>

name属性を使用すると、同時に1つのスポイラーのみが開いているアコーディオンを作成できます（グループ内のすべてのアイテムに同じname値がある場合）。

アクセシビリティ

**「展開／折りたたみ」の状態 は、ネイティブタグ <details> を使用することでスクリーンリーダーに自動的に読み上げられます。これには追加の ARIA 属性は必要ありません。アイコン（矢印やプラス記号）には、視覚的な機能を持つため、常に aria-hidden="true" が追加されます。これを音声で読み上げると、ユーザーにとって余計な「ノイズ」**となるからです。

<summary> のおかげで、Tab キーを押すと要素に自動的にフォーカスが移り、Enter キーまたは Space キーで操作が可能になります。また、キーボード操作時にユーザーがアクティブな要素の outline を明確に確認できるよう、疑似クラス :focus-visible の使用が必須です。

トリガー内のテキストは、スクリーンリーダーのユーザーがアコーディオンの各セクションを素早く移動できるように、ページの構造に対応した見出し（<h3>-<h6>）で囲む必要があります。

インタラクティブ性と視覚的な反応

トリガー<summary> のクリック領域は、可能な限り大きくし、内部に十分な余白を設ける必要があります。これはモバイルデバイスにおいて極めて重要です。また、コンテンツにも内部に十分な余白を設け、アクティブエリアの面積を拡大する必要があります。テキストを**「 詰め込みすぎない」ようにし、ユーザーが要素の状態を理解できるように、常にホバー**、フォーカス、オープンの3種類の反応状態を使用する必要があります。

/* 基本スタイル */
.spoiler__trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none; /* システムマーカーを非表示 */
}

.spoiler__trigger::-webkit-details-marker {
  display: none;
}

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

/* 開いている状態 */
.spoiler[open] .spoiler__trigger {
  background-color: #f8f9fa;
  border-block-end: 1px solid #eee;
}

/* アイコンアニメーション */
.spoiler__icon {
  flex-shrink: 0;
  inline-size: 24px;
  block-size: 24px;
  transition: rotate 0.3s ease-in-out;
}

.spoiler[open] .spoiler__icon {
  rotate: 180deg;
}

Plugin

Next Accordionプラグイン