APG パターン
アコーディオンパターン
垂直に積み重ねられたセクションヘッダーのセットで、各ヘッダーが対応するコンテンツパネルの表示/非表示を制御します。
キーボード操作
| キー | 動作 |
|---|---|
| Enter / Space | フォーカスされたアコーディオンヘッダーのパネルを展開/折りたたみ |
| ↓（下矢印） | 次のアコーディオンヘッダーにフォーカスを移動（最後の場合は最初に戻る） |
| ↑（上矢印） | 前のアコーディオンヘッダーにフォーカスを移動（最初の場合は最後に移動） |
| Home | 最初のアコーディオンヘッダーにフォーカスを移動 |
| End | 最後のアコーディオンヘッダーにフォーカスを移動 |
必要な ARIA
ヘッダーボタン
aria-expandedパネルの展開状態（true/false）aria-controls制御するパネルのIDパネル
role="region"パネルがリージョンであることを示すaria-labelledby対応するヘッダーボタンのIDライブデモ
Tabでヘッダーにフォーカスし、↑↓でヘッダー間を移動、Enter/Spaceで開閉できます。
ウェブアクセシビリティとは、障害のある人々がウェブを利用できるようにすることです。視覚、聴覚、運動、認知など、あらゆる種類の障害を持つ人々が、ウェブコンテンツを知覚し、理解し、操作し、貢献できるようにします。
Web Content Accessibility Guidelines (WCAG) は、W3C の Web Accessibility Initiative (WAI) が策定した国際的なガイドラインです。知覚可能、操作可能、理解可能、堅牢の4つの原則に基づいています。
WAI-ARIA (Accessible Rich Internet Applications) は、動的なウェブコンテンツやカスタムUIコンポーネントのアクセシビリティを向上させるための仕様です。HTMLだけでは表現できないセマンティクスを補完します。
よくある間違い
- ヘッダーに<button>要素ではなく<div>を使用してキーボード操作ができない
- aria-expandedを動的に更新していない
- aria-controlsでパネルとの関連付けを省略している
- 矢印キーによるヘッダー間のナビゲーションが実装されていない
- パネルにrole="region"とaria-labelledbyを設定していない
アコーディオンヘッダーは
<h3>などの見出し要素でラップし、その中に<button>を配置するのが推奨パターンです。