カルーセル（スライドショー又は画像ローテーター）パターン

このパターンについて

カルーセルは、スライドとして参照される一連のアイテムを提示し、1 つ以上のスライドのサブセットを順次表示します。 通常、一度に 1 つのスライドが表示され、利用者は現在のスライドを隠し、次又は前のスライドを「回転」させて表示するコントロールを作動することができます。 一部の実装では、ページの読み込み時に自動的に回転が開始され、すべてのスライドが表示されると自動的に停止することもあります。 スライドには任意のタイプのコンテンツを含めることができますが、各スライドに単一の画像しか含まれていない画像カルーセルは一般的です。

すべての利用者がスライドの回転を簡単に制御し、スライドの回転によって不利益を受けないようにすることは、カルーセルをアクセシブルにするための必要不可欠な側面です。 例えば、画面上に表示されていないスライドを隠しそこなっている場合 (例: 画面外に表示)、スクリーンリーダーの利用時に混乱や方向感の喪失を感じることがあります。 同様に、スライドが自動的に回転し、スクリーンリーダーの利用者がその回転を認識していない場合、利用者はスライド 1 の要素を読み、次の要素のスクリーンリーダーコマンドを実行すると、スライド 1 の次の要素を聞く代わりに、スライド 2 の要素を知らず知らずのうちに聞くことになり、その発表された要素がまったく新しい文脈からのものであることを理解できないかもしれません。

十分な回転制御を提供するための機能には以下が含まれます：

• 前のスライドと次のスライドを表示するボタン。
• オプションとして、表示する特定のスライドを選択するコントロールやそのグループがあります。 具体的には、スライドピッカーコントロールは tablist の中の tab としてマークアップされ、それに対応するスライドは tabpanel 要素として示されます。
• カルーセルが自動的に回転する場合、それはまた:
  • 回転を停止し再開するボタンを持っています。 これは、キーボードフォーカスやマウスを移動しないモードでの支援技術の操作をサポートするために特に重要です。
  • キーボードフォーカスがカルーセルに入ると回転が停止します。 利用者が明示的にそれを要求しない限り、再開しません。
  • マウスがカルーセルの上にホバーしているときいつでも回転が停止します。

例

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

用語

カルーセルのコンポーネントを説明するために以下の用語が使用されています。

スライド

カルーセルによって提示されるコンテンツを含む単一のコンテンツコンテナで、一連のコンテンツコンテナに含まれる。

回転コントロール

自動スライド回転を停止及び開始するインタラクティブな要素。

次のスライドコントロール

回転シーケンスの次のスライドを表示するインタラクティブな要素で、しばしば矢印としてスタイル付けされる。

前のスライドコントロール

回転シーケンスの前のスライドを表示するインタラクティブな要素で、しばしば矢印としてスタイル付けされる。

スライドピッカーコントロール

回転シーケンス内の特定のスライドを選択するための要素のグループで、しばしば小さなドットとしてスタイル付けされる。

キーボードのインタラクション

• カルーセルに自動回転機能がある場合、カルーセル内の任意の要素がキーボードフォーカスを受け取ると、自動スライド回転が停止します。 利用者が回転コントロールを作動するまで再開しません。
• Tab 及び Shift + Tab: ページのタブ順序で指定されたカルーセルのインタラクティブな要素を通じてフォーカスを移動します -- Tab のためのスクリプトは必要ありません。
• ボタン要素は、ボタン パターンで定義されたキーボードインタラクションを実装します。 注記: 回転コントロール、次のスライド、前のスライドを作動することはフォーカスを移動しませんので、利用者は望むだけ何度も繰り返し作動することができます。
• 存在する場合、回転コントロールはカルーセル内の Tab シーケンスの最初の要素です。 回転するコンテンツより先に配置されることは、簡単に位置を特定するために不可欠です。
• スライドピッカーコントロールのために tab 要素が使用されている場合、それらはタブ パターンで定義されたキーボードインタラクションを実装します。

WAI-ARIA のロール、ステート、及びプロパティ

このセクションでは、3 つのスタイルのカルーセルの要素構成について説明します：

• 基本: 回転、前のスライド、次のスライドのコントロールはあるが、スライドピッカーコントロールはない。
• タブ付き: 基本のコントロールに加えて、タブ パターンを使用して実装されたスライドピッカーコントロールのための単一のタブストップがある。
• グループ化: 基本的なコントロールに加えて、スライドピッカーコントロールのグループがある。このグループ内の各コントロールはボタン パターンを実装し、複数のタブストップを持つ。 それぞれのスライド選択ボタンがページのタブシーケンスに要素を追加するため、このスタイルはキーボード利用者にとって最も使いにくい。

基本的なカルーセルの要素

• カルーセルのすべてのコンポーネントを包括するカルーセルコンテナ要素は、カルーセルのコントロール及びスライドの両方を含むもので、ロール region 又はロール group のいずれかを持っています。 カルーセルコンテナの最も適切なロールは、ページの情報アーキテクチャに依存します。 カルーセルがランドマーク領域として指定されるかどうかを判断するために、 ランドマーク領域の実践 を参照してください。
• カルーセルのコンテナは、aria-roledescription プロパティを カルーセル に設定しています。
• カルーセルに可視ラベルがある場合、そのアクセシブルなラベルは、カルーセルコンテナのプロパティ aria-labelledby によって提供され、表示されるラベルを含む要素の ID に設定されます。 それ以外の場合、アクセシブルなラベルは、カルーセルコンテナに設定されたプロパティ aria-label によって提供されます。 aria-roledescription が「カルーセル」と設定されているため、ラベルには「カルーセル」という言葉は含まれていません。
• 回転コントロール、次のスライドコントロール、及び前のスライドコントロールは、ネイティブのボタン要素（推奨）であるか、ボタン パターン を実装しています。
• 回転コントロールには、内部テキスト又は aria-label によって提供されるアクセシブルなラベルがあります。 ラベルは、ボタンが実行するアクションに合わせて変更されます。例えば、「スライド回転を停止」又は「スライド回転を開始」。 ボタンが作動するとラベルが変わることは、スライドのコンテンツが自動的に変わること及びそれがいつ行われているかを明確に伝えます。 ラベルが変わるため、回転コントロールには、例えば aria-pressed のようなステートが指定されていないことに注意してください。
• 各スライドコンテナは、group ロールを持ち、プロパティ aria-roledescription を スライド に設定しています。
• 各スライドにはアクセシブルな名前があります:
  • スライドに可視ラベルがある場合、そのアクセシブルなラベルは、スライドコンテナのプロパティ aria-labelledby によって提供され、可視ラベルを含む要素の ID に設定されます。
  • それ以外の場合、アクセシブルなラベルは、スライドコンテナに設定されたプロパティ aria-label によって提供されます。
  • スライドのコンテンツを識別するユニークな名前が利用できない場合、番号とセットサイズを意味のある代替手段として使用できます。例:「3/10」。注記: 通常、アクセシブルな名前にセット位置とサイズ情報を含めることは適切ではありません。この実装では例外的に役立ちます。なぜなら、group 要素は aria-setsize 又は aria-posinset をサポートしていないからです。タブ付きのカルーセル実装パターンにはこの制限がありません。
  • aria-roledescription が「スライド」と設定されているため、ラベルに「スライド」という言葉は含まれていません。
• 任意で、スライド要素のセットを含む要素には、aria-atomic が false に設定され、aria-live が以下に設定されています:
  • off: カルーセルが自動的に回転しているとき。
  • polite: カルーセルが自動的に回転していないとき。

タブ付きカルーセルの要素

タブ付きのカルーセルの構造は、基本的なカルーセルと同じですが、以下の点が異なります：

• 各スライドコンテナは、group の代わりに tabpanel ロールを持ち、aria-roledescription プロパティを持っていません。
• タブ パターンを使用して実装されたスライドピッカーコントロールがあり、以下のようになります:
  • 各コントロールは tab 要素であり、タブを作動すると、そのタブに関連付けられたスライドが表示されます。
  • 各 tab のアクセシブルな名前は、スライドの名前又は番号を含むことで、どのスライドを表示するかを示します。例：「スライド 3」。 各スライドにユニークな名前がある場合、スライドの名前が望ましい。
  • コントロールのセットは tablist 要素にグループ化され、タブの目的を識別する aria-label の値によって提供されるアクセシブルな名前を持つます。例:「表示するスライドを選択」。
  • tab・tablist・tabpanel は、タブ パターンで指定されたプロパティを実装しています。

グループ化されたカルーセルの要素

グループ化されたカルーセルは、基本的なカルーセルと同じ構造を持っていますが、スライドピッカーコントロールも含まれています:

• スライドピッカーコントロールのセットは、group ロールを持つ要素に含まれています。
• ピッカーコントロールを含むグループには、コントロールの目的を識別するアクセシブルなラベルがあり、aria-label の値によって提供されます。例：「表示するスライドを選択」。
• 各ピッカーコントロールは、ネイティブのボタン要素（推奨）であるか、ボタン パターン を実装しています。
• 各ピッカーボタンのアクセシブルな名前は、表示するスライドの名前と一致します。 これを実現するための一つの手法は、aria-labelledby を、スライド group 要素を参照する値に設定することです。
• 現在表示されているスライドを表すピッカーボタンには、プロパティ aria-disabled が true に設定されています。 注記: aria-disabled は HTML の disabled 属性よりも好まれます。なぜならこの状況は、無効なボタンがページの Tab シーケンスに含まれることで、スクリーンリーダー利用者が利益を得られるからです。