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

この例について

以下のカルーセルパターンの実装例は、ページの読み込み時に自動的に回転を開始するカルーセルのアクセシビリティに不可欠なパターンの特徴を示しています。 この例は、シーケンス内のスライドをスキップして直接表示するスライドを選択する方法として、タブパターンを利用する方法を示しています。 スライド間のナビゲーションは、タブとして機能する一連の円形のボタンによって提供され、回転するスライドの上にレンダリングされます。 利用者がカルーセル内の任意のコントロールやリンクにフォーカスを移動するか、カルーセルのコンテンツの上にマウスをホバーすると、自動回転が停止します。 例の後に続くアクセシビリティの特徴のセクションでは、これらデザインの側面を詳しく説明しています。

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

• スライドコントロールのボタンを持つ自動回転画像カルーセル: ページの読み込み時に自動的に回転するカルーセルに必要なアクセシビリティ機能を示す基本的な画像カルーセルで、前のスライドと次のスライドのボタンで表示するスライドを選択することができます。

例のオプション

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

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

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

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

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

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

自動回転を無効にする

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

アクセシビリティ機能

自動スライド回転の制御

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

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

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

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

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

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

画像内にあるコントロールとテキストの色のコントラストの問題を回避する一つの方法は、コントロールを画像の外に配置することです。 コントロールとテキストを固定背景上に移動にすることで、著者には色のコントラストを制御するのが、利用者にはそれを知覚するのが簡単になります。 このテクニックの一例はビューオプションのうちのひとつです。

タブリストとタブのフォーカススタイリング

• タブがフォーカスを受け取ると、タブリスト全体もボーダーでハイライトされ、利用者にグループ内のコントロール間を移動するために矢印キーが使用されることを示す手がかりが提供されます。
• フォーカススタイリングに使用される CSS ボーダーの幅は、コントロールがフォーカスを受け取るときに0ピクセルから2ピクセルに変更され、オペレーティングシステムの高コントラストオプションが有効になっているときのフォーカスの可視性をサポートします。

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

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

注記: 通常のタブにおいては、タブパネルをライブ領域にすることは推奨されません。 カルーセルの使用例では、コンテンツの迅速かつ軽量なスキャンが主な目的であるため、ライブ領域は自動回転を有する非スクリーンリーダー利用者の体験を模倣するために使用されます。

キーボードサポート

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

JavaScript 及び CSS のソースコード

• CSS: carousel-tablist.css
• Javascript: carousel-tablist.js

HTML ソースコード