カルーセルは、複数の画像や記事を同じ表示領域で順に切り替えるユーザーインターフェースです。
限られたスペースに複数の情報を置ける一方、自動切り替えや不明確な操作ボタンがあると、内容を読み終える前に表示が変わったり、キーボードやスクリーンリーダーから目的のスライドへ移れなかったりします。
アクセシブルなカルーセルには、停止できる動き、予測できるキーボード操作、現在位置の伝達、安定したフォーカス管理が必要です。
- 自動切り替えを使う場合は、停止と再開を利用者が選べるようにする
- 前後移動などのすべての機能をキーボードで操作できるようにする
- カルーセルの名前、各スライドの名前、現在位置を視覚と音声の両方で伝える
- 非表示スライドのリンクやボタンをフォーカス順から外す
カルーセルで起こりやすい四つの問題
カルーセルの問題は、見た目だけを確認しても見つからないことがあります。
マウスを使わない場合や、画面を見ずに内容を追う場合の動きを含めて確認する必要があります。
- 読む時間が足りない：文章を読んでいる途中で自動的に次のスライドへ移ると、内容を把握しにくくなります。
- 操作方法が伝わらない：矢印や小さな点だけでは、それが操作ボタンなのか、どのスライドを表示するのかが分かりません。
- 現在位置が分からない：表示中の項目と全体の件数が示されないと、見落とした情報があるか判断できません。
- フォーカスが迷子になる：非表示スライドのリンクにフォーカスが移ったり、カルーセル内から抜けられなくなったりすると、キーボード操作を続けられません。
W3Cのカルーセルチュートリアルも、構造、キーボード操作、停止可能な動き、スライド変更の伝達、フォーカス管理を主要な確認点として挙げています。
WCAG 2.2とカルーセルの関係
WCAGにはカルーセル専用の達成基準があるわけではありません。
一つのカルーセルに、情報の構造、キーボード操作、動きの制御、名前や状態の伝達に関する複数の達成基準が関係します。
| 達成基準 | カルーセルで確認する内容 |
|---|---|
| 1.3.1 情報及び関係性 | 見出し、スライド群、操作部品の関係をプログラムで判別できるようにします。 |
| 2.1.1 キーボード | 前後移動、特定スライドの選択、停止と再開をキーボードから実行できるようにします。 |
| 2.2.2 一時停止、停止及び非表示 | 条件に該当する自動的な動きや更新を、利用者が一時停止、停止、非表示にできるようにします。 |
| 4.1.2 名前、役割及び値 | 操作ボタンの名前、役割、状態や変更を支援技術へ伝えます。 |
達成基準の位置付けから確認したい場合は、サイト内のWCAG 2.2の基本解説も参照してください。
この表の項目を実装しただけで、ページ全体がWCAGに適合するとは限りません。
カルーセルを含むページ全体の構造、色、文字、入力方法なども別に評価します。
自動切り替えを利用者が制御できるようにする
自動切り替えを使わず、利用者の操作でだけスライドを変える設計は、読む時間を奪わず実装も単純になります。
自動切り替えが必要な場合は、カルーセルの先頭付近に停止と再開を切り替えるボタンを置きます。
ボタン名は「再生／停止」のように二つの動作を並べず、押した後に起きる動作を示します。
<button type="button" class="carousel-rotation">
スライドの自動切り替えを開始
</button>自動切り替えを開始した後は、ラベルを「スライドの自動切り替えを停止」に変更します。
WAI-ARIA Authoring Practices Guideのカルーセルパターンでは、自動切り替え中にカルーセル内へキーボードフォーカスが入った場合は切り替えを止め、利用者が明示的に再開するまで動かさない設計を示しています。
マウスポインターがカルーセル上にある間も切り替えを止めれば、ポインターで内容を追っている利用者の操作を妨げにくくなります。
WCAG 2.2の達成基準2.2.2の解説には適用条件があるため、「自動切り替えはすべて同じ条件で違反になる」とは限りません。
それでも、利用者が動きを止められる設計は、カルーセルの内容を自分の速さで確認するために有効です。
動き全般の設計は、サイト内のWebアニメーションのアクセシビリティ設計で確認できます。
キーボード操作とフォーカス管理
前へ、次へ、停止、再開などの操作には、標準の<button>要素を使うと、キーボードから操作できる基本動作と役割を利用できます。
<button type="button" aria-label="前のスライドを表示">◀</button>
<button type="button" aria-label="次のスライドを表示">▶</button>TabとShift＋Tabでは、ページの自然な順序に従ってカルーセル内外の操作要素へ移動できるようにします。
カルーセル内だけにフォーカスを閉じ込める処理は不要です。
前後ボタンを押したときも、通常は押したボタンにフォーカスを残すと、同じ操作を続けて実行できます。
矢印キーは、すべてのカルーセルに追加する共通要件ではありません。
スライド選択をタブのパターンで実装する場合は、そのタブ操作の規則に合わせて矢印キーを割り当てます。
非表示スライドを画面外へ移動するだけでは、その中のリンクやボタンがフォーカス順に残る場合があります。
hiddenなどを使って非表示スライドを操作対象から外し、表示中のスライドだけにフォーカス可能な要素が残ることを確認します。
基本操作とフォーカス表示は、サイト内のキーボード操作とフォーカス表示の実務解説も参考になります。
名前、現在位置、変更内容を伝える
スクリーンリーダーは画面の配置そのものではなく、HTMLの構造やアクセシブルな名前を手掛かりに操作対象を伝えます。
カルーセル全体には見出しで名前を付け、各スライドには内容を表す見出しと「1 / 3」のような位置情報を与えます。
操作ボタンがアイコンだけの場合は、aria-labelなどで「前のスライドを表示」のような動作を補います。
aria-liveは、カルーセルに付ければ常に使いやすくなる属性ではありません。
自動切り替え中に変更を毎回読み上げると、別の内容を読んでいる利用者を妨げるおそれがあります。
APGの基本パターンでは、自動切り替え中はライブリージョンをoffにし、自動切り替えが止まっているときはpoliteにする方法を示しています。
読み上げの仕組みを先に確認したい場合は、サイト内のスクリーンリーダーの基本を参照してください。
停止状態から始めるHTML構造例
次の例は、自動切り替えを停止した初期状態の骨組みです。
実際の切り替え処理では、表示スライド、ボタン名、位置情報、aria-liveの値を同じ状態にそろえます。
<section
class="carousel"
aria-labelledby="featured-title"
aria-roledescription="carousel">
<h2 id="featured-title">注目情報</h2>
<div class="carousel-controls">
<button type="button" class="carousel-rotation">
スライドの自動切り替えを開始
</button>
<button type="button">前のスライドを表示</button>
<button type="button">次のスライドを表示</button>
</div>
<div class="carousel-slides" aria-live="polite" aria-atomic="false">
<div role="group" aria-roledescription="slide" aria-label="1 / 3">
<h3>新製品の紹介</h3>
<p>新製品の特徴を説明する文章です。</p>
</div>
<div role="group" aria-roledescription="slide" aria-label="2 / 3" hidden>
<h3>イベント情報</h3>
<p>イベントの内容を説明する文章です。</p>
</div>
</div>
</section>role="region"を機械的に追加する必要はありません。
ページの情報構造上、カルーセルをランドマークとして扱う意味がある場合はregionを使い、そうでなければ過剰なランドマークを増やさない構造を選びます。
画像とスライド本文の扱い
画像だけで題名や説明を伝えると、画像を見られない利用者に情報が届きません。
スライドには内容を特定できる見出しと本文を置き、情報を持つ画像には目的に合った代替テキストを設定します。
画像と隣接する本文が同じ情報を伝えている場合は、同じ説明を重ねて読み上げないよう、画像の役割を見直します。
見出しレベルは「各スライドは必ずh2」のように固定せず、ページ全体の見出し階層に合わせます。
よくある実装ミスと改善方法
| 実装ミス | 起きる問題 | 改善方法 |
|---|---|---|
| 自動切り替えに停止操作がない | 読み終える前に内容が変わる | 停止と再開を切り替えるボタンを先頭付近に置く |
| ボタン名が「再生／停止」 | 押した後の動作が分からない | 現在実行できる動作をボタン名にする |
| 矢印や点に名前がない | 操作の目的と移動先が伝わらない | 見える文字またはアクセシブルな名前で動作や対象を示す |
| 非表示スライドを画面外へ移動するだけ | 見えないリンクへフォーカスが移る | 非表示部分を読み上げとフォーカスの対象から外す |
自動切り替え中もaria-live="polite" |
スライド変更の通知が読み上げを妨げる | 自動切り替え中はoff、停止中は必要に応じてpoliteにする |
| カルーセル内にフォーカスを閉じ込める | 次のページ要素へ移動できない | 通常のTab順序でカルーセルの外へ進めるようにする |
公開前のテスト手順
- 初期状態を確認する：自動切り替えの有無、表示中のスライド、停止または再開ボタンの名前が一致しているか確認します。
- キーボードだけで操作する：
Tab、Shift＋Tab、Enter、Spaceを使い、すべての機能を実行します。 - フォーカスの位置を追う：フォーカス表示が見え、非表示スライドへ移らず、カルーセルの外にも進めることを確認します。
- 自動切り替えを止める：停止操作が見つけやすく、停止後に勝手に再開しないことを確認します。
- スライドを続けて切り替える：前後ボタンを繰り返し押せて、表示内容と現在位置が同時に更新されることを確認します。
- スクリーンリーダーで聞く：カルーセル名、ボタン名、スライド名、現在位置が区別して伝わり、非表示内容が読み上げ順に混ざらないことを確認します。
実装チェックリスト
- カルーセルを使う目的と、各スライドの優先順位が決まっている
- 自動切り替えを使う場合、停止と再開の操作が見える位置にある
- 自動切り替えは、フォーカスが入ると停止する
- 操作には標準のボタン要素を使っている
- すべての操作をキーボードだけで実行できる
- フォーカスが見え、カルーセルの外へ移動できる
- 非表示スライドのリンクやボタンにフォーカスが移らない
- カルーセル全体と各スライドに内容を表す名前がある
- 表示中の位置と全体件数が視覚と音声の両方で分かる
aria-liveの値が自動切り替えの状態と一致している- 画像だけに題名や説明を埋め込んでいない
カルーセルを採用する前の判断
カルーセルは、複数の情報を一つの領域で順に見せる目的に合う場合に選びます。
すべての情報を同時に並べても目的を達成できるなら、一覧やグリッドの方が内容を見つけやすく、操作も単純になります。
カルーセルを採用する場合は、見た目の切り替えだけで完成とせず、利用者が自分の速さで止め、選び、現在位置を確かめられるところまで設計します。