カルーセル

カルーセル（Carousel）とは？

カルーセルは、複数のスライド（バナー・特集・写真など）を同じ場所で順番に切り替えて見せる UI です。 トップページのヒーローバナーや商品ギャラリーでよく使われます。

便利な反面、勝手に動く・止められない・キーボードで操作できないと なりがちで、アクセシビリティの問題が起きやすいパターンの代表格です。

なぜアクセシビリティが大事なの？

• 自動で動くコンテンツが苦手な人。動き続けるバナーは、読むのが遅い人・注意の維持が難しい人・ 前庭障害などで動きに敏感な人にとって大きな負担です。停止できることが必須です （WCAG 2.2.2「一時停止、停止、非表示」）。
• キーボードだけで操作する人。前/次/再生停止が <div> だと操作できません。 ネイティブの <button> で実装します。
• スクリーンリーダーを使う人。各スライドに「3枚中1枚目」のようなラベルがないと、 全体で何枚あり今どこかが分かりません。自動回転中に内容が読み上げられ続けると混乱するため、 回転中は aria-live を切るのがコツです。

ライブデモ（推奨実装）

下のカルーセルは APG に沿った実装です。再生/停止・前/次をキーボードで操作してみてください。

キーボード操作

必要な WAI-ARIA / ロール

実装：推奨パターン（Good）

マークアップ:

<section class="carousel"
         aria-roledescription="carousel"
         aria-label="おすすめ特集">
  <!-- 自動回転するなら 再生/停止ボタンは必須 -->
  <div class="carousel-controls">
    <button type="button" aria-label="自動再生を停止" data-toggle>⏸</button>
    <button type="button" aria-label="前のスライド" data-prev>‹</button>
    <button type="button" aria-label="次のスライド" data-next>›</button>
  </div>

  <div class="carousel-slides">
    <div role="group" aria-roledescription="スライド" aria-label="3枚中1枚目">
      …スライド1…
    </div>
    <div role="group" aria-roledescription="スライド" aria-label="3枚中2枚目" hidden>
      …スライド2…
    </div>
    <div role="group" aria-roledescription="スライド" aria-label="3枚中3枚目" hidden>
      …スライド3…
    </div>
  </div>
</section>

再生制御と一時停止のスクリプト:

let index = 0;
let playing = true;
let timer = null;

function show(i) {
  index = (i + slides.length) % slides.length;
  slides.forEach((s, n) => (s.hidden = n !== index));
}
function start() {
  playing = true;
  toggle.setAttribute('aria-label', '自動再生を停止');
  // 自動回転中は読み上げが暴れないよう live を off に
  slidesBox.setAttribute('aria-live', 'off');
  timer = setInterval(() => show(index + 1), 4000);
}
function stop() {
  playing = false;
  toggle.setAttribute('aria-label', '自動再生を開始');
  // 停止/手動操作中は変化を読み上げる
  slidesBox.setAttribute('aria-live', 'polite');
  clearInterval(timer);
}

toggle.addEventListener('click', () => (playing ? stop() : start()));
prev.addEventListener('click', () => { stop(); show(index - 1); });
next.addEventListener('click', () => { stop(); show(index + 1); });

// フォーカス/ホバー中は自動回転を一時停止
carousel.addEventListener('mouseenter', () => playing && clearInterval(timer));
carousel.addEventListener('mouseleave', () => playing && start());
carousel.addEventListener('focusin', () => playing && clearInterval(timer));
carousel.addEventListener('focusout', () => playing && start());

アンチパターン（Bad）

下は止められない自動回転のカルーセルです。矢印は <div> でフォーカスできず、 スライドに位置ラベルもありません。

<!-- ❌ アンチパターン -->
<div class="carousel">
  <!-- 停止できない自動回転・スライドのラベルなし -->
  <div class="slides">
    <div class="slide">特集1</div>
    <div class="slide" style="display:none">特集2</div>
  </div>
  <!-- div の矢印はフォーカスできない -->
  <div class="arrow" onclick="prev()">‹</div>
  <div class="arrow" onclick="next()">›</div>
</div>
<script>
  // 止める手段がない無限自動回転
  setInterval(next, 2000);
</script>

実装チェックリスト

• 自動回転するなら再生/停止ボタンを必須で用意している
• フォーカス／ホバーの間は自動回転が一時停止する
• 前/次/再生停止はすべてネイティブの <button>（div を使わない）
• アイコンボタンに aria-label、停止/開始でラベルを切り替えている
• 各スライドに role="group" + 「○枚中○枚目」のラベルがある
• 自動回転中は aria-live="off"、停止/手動時は polite
• 表示中以外のスライドは hidden
• aria-roledescription="carousel"（任意）、フォーカスが見える

原文（英語）:Carousel Pattern — W3C APG（新しいタブで開きます）