カルーセル（アクセシビリティ）
カルーセルを使用するべきかを慎重に検討する
カルーセルは、デフォルトでは一度に表示されるスライドがひとつであり、それ以外のスライドの内容は隠された状態となります。このため、カルーセルは情報へのアクセシビリティが低いコンポーネントであるといえます。デザインや情報設計の基本的な姿勢として、コンテンツは隠さずに最初からすべて表示されていることを心がけましょう。ユースケースに合致した使い方であっても、できるだけカルーセル以外の表現方法でのページ設計・デザインを検討してください。
カルーセルが必要な場合は本コンポーネントを使用する
一般的なカルーセルには、アクセシビリティやユーザビリティに関する複数の問題があります（キーボード操作、動きのあるコンテンツ等）。本コンポーネントはそうした問題を解決または回避し、可能な限りアクセシビリティを確保したつくりになっています。しかしそれでも、カルーセル固有の「情報へのアクセシビリティの低さ」「アクセス解析における統計的な傾向で示されるクリック率やコンバージョン率の低さ」等は依然として存在します。それを踏まえたうえでもカルーセルを使用する場合は、必ず本コンポーネントを使用してください。
参考情報
-
- 達成基準 1.1.1: 非テキストコンテンツ（レベルA）JIS2016WCAG2.2
-
- 達成基準 1.3.1: 情報及び関係性（レベルA）JIS2016WCAG2.2
-
- 達成基準 1.3.2: 意味のあるシーケンス（レベルA）JIS2016WCAG2.2
-
- 達成基準 1.4.3: コントラスト（最低限）（レベルAA）JIS2016WCAG2.2
-
- 達成基準 1.4.10: リフロー（レベルAA）WCAG2.2
-
- 達成基準 1.4.11: 非テキストのコントラスト（レベルAA）WCAG2.2
-
- 達成基準 2.1.1: キーボード（レベルA）JIS2016WCAG2.2
-
- 達成基準 2.2.1: タイミング調整可能（レベルA）JIS2016WCAG2.2
- 本コンポーネントでは、時間制限を持たない仕様にしています。
-
- 達成基準 2.2.2: 一時停止、停止、非表示（レベルA）JIS2016WCAG2.2
- 本コンポーネントでは、再生・停止の仕組みを持たない仕様にしています。
-
- 達成基準 2.3.3: インタラクションによるアニメーション（レベルAAA）WCAG2.2
- 本コンポーネントでは、アニメーションしない仕様にしています。
-
- 達成基準 2.4.3: フォーカス順序（レベルA）JIS2016WCAG2.2
-
- 達成基準 2.4.7: フォーカスの可視化（レベルAA）JIS2016WCAG2.2
-
- 達成基準 2.4.10: セクション見出し（レベルAAA）JIS2016WCAG2.2
-
- 達成基準 2.4.13: フォーカスの外観（レベルAAA）WCAG2.2
-
- 達成基準 2.5.7: ドラッグ動作（レベルAA）WCAG2.2
- 本コンポーネントでは、ドラッグ動作を持たない仕様にしています。
-
- 達成基準 2.5.8: ターゲットのサイズ（最低限）（レベルAA）WCAG2.2
-
- 達成基準 4.1.2: 名前（name）・役割（role）・値（value）（レベルA）JIS2016WCAG2.2
-
- 達成基準 4.1.3: ステータスメッセージ（レベルAA）WCAG2.2
- 本コンポーネントでは、スライドの切り替えをaria-liveで通知しています。
スライド内のテキストを短くする
スライドに多くの文字を詰め込むと、文字が小さくなったり字の画数が省略されたりした状態で画像化されたテキストとなるため、閲覧する環境や状況によっては読みにくくなります。また、代替テキストの文章量が増えるため、スクリーンリーダーでの閲覧が困難になるだけでなく、コンテンツ運用における作成や確認にかかる工数も増大します。スライドの内容説明はリンク先で行う前提で、スライド内のテキストは短くしてください。
スライドの数を少なくする
スライドが多すぎるとコンテンツ運用における作成や確認にかかる工数が増大するだけでなく、閲覧するユーザーの負担も大きくなります。かつ、後半になるほどスライドは閲覧されなくなります。スライドの数はできるだけ少なくし、最大でも6つまでとしてください。