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

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

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

構造とマークアップ

アコーディオンの基盤は<ul>リストです。これにより、支援技術がスポイラーのグループを関連要素の単一リストとして認識できるようになります。

各リスト項目<li>内には、以下を厳密に含む<details>タグが配置されます：

1. ヘッダートリガー<summary>；
2. コンテンツ領域<div>。

<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値がある場合）。

アクセシビリティ

1. 状態セマンティクス - 「展開/折りたたみ」状態は、ネイティブの<details>タグを使用しているおかげで、スクリーンリーダーに自動的に伝えられます。追加のARIA属性は必要ありません。

2. 装飾的要素の非表示 - アイコン（矢印）には常にaria-hidden="true"が追加されます。これは視覚的な機能を持っており、それを音声化するとユーザーにとって不要な「ノイズ」が生じます。

3. キーボードナビゲーション - <summary>により、メイン要素はTabキーを押すと自動的にフォーカスを受け、EnterキーまたはSpaceキーでアクティベートされます。

4. 視覚的フォーカス - :focus-visible疑似クラスを使用する必要があります。キーボードでナビゲートしているとき、ユーザーはアクティブな要素の明確なアウトラインを見る必要があります。

5. 見出しの階層 - トリガー内のテキストは、ページ構造に対応する見出し（<h3>～<h6>）でラップする必要があります。スクリーンリーダーユーザーがアコーディオンセクション間をすばやく移動できるようにするためです。

インタラクティビティとスタイリング

1. <summary>トリガーのクリック領域はできるだけ大きくする必要があります。これはモバイルデバイスにとって重要です。

2. トリガーとコンテンツには、個別の内部パディングが必要です。これにより、テキストを「折りたたまず」アクティブ領域が拡大します。

ユーザーは、3つのタイプの反応を通じて要素の状態を即座に理解する必要があります：

1. ホバー - ホバー時の微妙な背景変更；
2. フォーカス - アクセント枠線；
3. 開く - 開いているスポイラーの背景色の変更または分割線の表示。

/* 基本スタイル */
.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__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;
}

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

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

記事は随時更新されます