スライドコントロールのボタンを持つ自動回転画像カルーセルの例

この例について

以下のカルーセル パターンの実装例は、ページの読み込み時に自動的に回転を開始するカルーセルのアクセシビリティに不可欠なパターンの特徴を示しています。 例えば、利用者がカルーセル内にフォーカスを移動するか、カルーセルのコンテンツの上にマウスをホバーすると回転が停止し、利用者は前のスライドと次のスライドのボタンで表示するスライドを手動で制御できます。 例の後に続くアクセシビリティの特徴のセクションでは、これらの特徴を詳しく説明しています。

類似の例には以下があります:

• スライドコントロールのタブを持つ自動回転画像カルーセル: ページの読み込み時に自動的に回転するカルーセルに必要なアクセシビリティ機能を示す画像カルーセルです。また、一連のタブで表示するスライドを利用者が選択できるようにしています。

例のオプション

カルーセルの表示と動作のオプション

画像の外にコントロールとキャプションを表示

このオプションは、コントロールとキャプションを画像内にレンダリングするよりもアクセシブルです。なぜなら、コントロールは知覚しやすく、背後に回転する画像がなくキャプションは読みやすくなるからです。

読み込み時に自動回転を一時停止（再読み込みが必要）

このオプションは、ページの読み込み時にカルーセルが一時停止しているか再生しているかを制御します。 一時停止オプションは、視覚障害のある利用者や自動回転によって混乱や気を散らされる人々のアクセシビリティを向上させますが、利用者が開始/停止ボタンを使用して自動回転を開始できるようにします。

注記: 利用者がシステムの設定で動きを減少させるオプションを選択している場合、読み込み時に自動回転は常に一時停止されます。

自動回転を無効にする

このオプションは、自動回転機能を無効にし、ユーザーインターフェースから開始/停止ボタンを削除することで、視覚障害のある利用者や自動回転によって混乱や気を散らされる人々のアクセシビリティを向上させます。 利用者は前のボタンと次のボタンを使用して、手動でスライドをナビゲートできます。

アクセシビリティ機能

自動スライド回転の制御

利用者はスライドの回転を停止及び開始することができます。これは、障害を持つ様々な人々にとって、カルーセルのアクセシビリティの不可欠な側面です。 ロービジョンや、視覚処理や読解に影響を及ぼす認知障害のある人にとって、スライドの回転を制御できることは、スライドの内容を探索するのに十分な時間を確保できることになり、利益を得られます。 同様に、スクリーンリーダーの利用者は自動的な回転を知覚できないため、ページを読むことが混乱しやすく、方向感を失わせることがあります。 例えば、スライドが自動的に回転しているとき、スクリーンリーダーの利用者はスライド 1 の要素を読んで、次の要素を読むためのスクリーンリーダーのコマンドを実行するかもしれませんが、スライド 1 の次の要素を聞く代わりに、完全に新しいコンテキストからの要素であるスライド 2 の要素を聞くことになり得ます。

この例には、利用者がスライドの回転を制御するための以下の機能が含まれています:

• オペレーティングシステムの設定が動きの減少やアニメーションの無効化に設定されている場合、自動回転は初めから一時停止されます。
• カルーセルのいずれかのコンテンツにマウスをホバーすると、自動回転が一時停止します。 マウスがカルーセルから移動すると、キーボードのフォーカスなど、回転を防ぐ別の条件がトリガーされていない限り、自動回転が再開されます。
• キーボードのフォーカスをカルーセルの任意のコンテンツ (次や前のスライドの要素を含む) に移動すると、自動回転が一時停止します。 キーボードのフォーカスがカルーセルのコンテンツから移動すると、マウスのホバーなど、回転を防ぐ別の条件がトリガーされていない限り、自動回転が再開されます。
• カルーセルには、自動回転を停止及び再開することができる回転制御ボタンも含まれています。
  • 回転制御ボタンは、スクリーンリーダーの読み取り順序で最初の要素です。
  • 回転制御ボタンは常に表示されているため、マウス、キーボード、支援技術、又はタッチを介して操作しているすべての利用者に利用できます。
  • カルーセルが回転している場合、ボタンのアクセシブルな名前は「自動スライドショーを停止」となり、スライドが変更されていることをスクリーンリーダー利用者に通知するとともに、変更を停止する方法を提供します。
  • カルーセルが回転していない場合、ボタンのアクセシブルな名前は「自動スライドショーを開始」となります。
  • 利用者が回転制御ボタンを活性化して回転を開始する場合、利用者が自動回転をすぐに開始したいと考えていると想定されます。したがって、回転を一時停止するカルーセル内のフォーカス及び／又はホバーの状態は無視されます。 回転は、再び回転制御ボタンが押下されるまで停止することはありません。
• この例には、自動スライド回転を完全に無効にするオプションが含まれています。 このオプションが選択されると、開始/停止ボタンはレンダリングされず、スライドは次及び前のボタンの活性化を通じてのみ回転することができます。

テキストと回転制御の色のコントラスト

このカルーセルのビューでは、コントロールとキャプションが画像内に表示されている場合、背景画像によってコントロールとテキストの色のコントラストが不十分になる可能性があります。 しかし、このビューには、この潜在的な問題を防ぐための以下の機能が含まれており、WCAG 2.1 の色のコントラスト要件を満たしています:

• 回転制御、次のスライド、及び前のスライドのボタンが画像内にレンダリングされる場合、ボタンには WCAG 2.1 の色のコントラスト要件を満たす前景色と背景色があります。 さらに、フォーカスのスタイリングは、コントロールがキーボードのフォーカスを受け取ったときにフォーカスインジケーターが非常に目立つようにする SVG 画像を使用しています。
• キャプションエリアの透明度が減少しているため、キャプションテキストは WCAG 2.1 の色のコントラスト要件を満たしています。

画像内にコントロールとテキストを表示することによって引き起こされる色のコントラストの問題を回避する一つの方法は、コントロールを画像の外に配置することです。 コントロールとテキストを固定背景に表示することで、色のコントラストを制御するのが簡単になります。 一つのビューオプションは、この技術の例を提供しています。

スライドの変更のスクリーンリーダーの読み上げ

自動回転がオフになっている場合、カルーセルのスライドコンテンツはライブリージョンに含まれています。 これにより、スクリーンリーダーの利用者がカルーセルのスライドをスキャンするのが簡単になります。 スクリーンリーダーの利用者が次又は前のスライドボタンを押下すると、新しいスライドのコンテンツが読み上げられ、コンテンツを操作するかどうかを判断するための即時のフィードバックが与えられます。 非常に重要なことに、自動回転がオンになっている場合、ライブリージョンは無効になっています。 そうでなければ、継続的に変更されるコンテンツの読み上げが利用者が読んでいる他のものを毎回中断するため、ページが使用できなくなります。

キーボードサポート

ロール、プロパティ、ステート、及び tabindex 属性

JavaScript 及び CSS のソースコード

• CSS: carousel-prev-next.css
• Javascript: carousel-prev-next.js

HTML ソースコード