APG パターン

カルーセルパターン

カルーセルは、自動または手動でコンテンツを切り替えて表示するウィジェットです。一時停止機能とキーボード操作が必須です。

キーボード操作

キー動作
Tabカルーセルのコントロール（一時停止、前へ、次へ）にフォーカスを移動
Enter / Spaceフォーカスされたコントロールを実行（一時停止/再生の切り替え、スライド移動）
←（左矢印）前のスライドに移動（コントロールにフォーカスがある場合）
→（右矢印）次のスライドに移動（コントロールにフォーカスがある場合）

必要な ARIA

カルーセルコンテナ
role="group"関連するコンテンツのグループであることを示す
aria-roledescription="カルーセル"ウィジェットの種類を説明
aria-labelカルーセルのアクセシブルな名前
スライド領域
aria-live自動再生中は"off"、停止中は"polite"に切り替え
aria-atomic="true"スライド全体を1つの単位として読み上げる
各スライド
role="group"スライドが1つのグループであることを示す
aria-roledescription="スライド"ウィジェットの種類を説明
aria-label"1 / 4: スライドタイトル" のような形式
コントロールボタン
aria-label「前のスライド」「次のスライド」「自動再生を停止」など

ライブデモ

一時停止ボタンで自動回転を制御し、前へ/次へボタンでスライドを手動で切り替えられます。 下部のドットインジケーターで任意のスライドに直接移動できます。

1 / 4

原則1：知覚可能

情報やUIコンポーネントは、ユーザーが知覚できる方法で提示する必要があります。代替テキスト、キャプション、十分なコントラストなどが含まれます。

aria-live の制御

カルーセルの自動再生状態に応じてaria-liveの値を切り替えることが重要です。

自動再生中

<div aria-live="off">
  <!-- スクリーンリーダーに
       通知しない -->
</div>

一時停止中

<div aria-live="polite">
  <!-- ユーザー操作時に
       スライド内容を通知 -->
</div>

よくある間違い

  • 自動再生を一時停止するボタンが提供されていない
  • aria-liveの値を自動再生の状態に合わせて切り替えていない（自動再生中はoff）
  • キーボードでスライドを操作できない
  • スライドの現在位置（例：2/4）がスクリーンリーダーに伝わらない
  • aria-roledescriptionで「カルーセル」「スライド」の説明がない
  • prefers-reduced-motionに対応していない
prefers-reduced-motion: reduceメディアクエリを使用して、動きを抑えたい設定のユーザーには自動再生をデフォルトで無効にしましょう。

参考リンク