スライドコントロールのタブを持つ自動回転画像カルーセルの例
この例について
以下のカルーセルパターンの実装例は、ページの読み込み時に自動的に回転を開始するカルーセルのアクセシビリティに不可欠なパターンの特徴を示しています。 この例は、シーケンス内のスライドをスキップして直接表示するスライドを選択する方法として、タブパターンを利用する方法を示しています。 スライド間のナビゲーションは、タブとして機能する一連の円形のボタンによって提供され、回転するスライドの上にレンダリングされます。 利用者がカルーセル内の任意のコントロールやリンクにフォーカスを移動するか、カルーセルのコンテンツの上にマウスをホバーすると、自動回転が停止します。 例の後に続くアクセシビリティの特徴のセクションでは、これらデザインの側面を詳しく説明しています。
類似の例には以下があります：
- スライドコントロールのボタンを持つ自動回転画像カルーセル: ページの読み込み時に自動的に回転するカルーセルに必要なアクセシビリティ機能を示す基本的な画像カルーセルで、前のスライドと次のスライドのボタンで表示するスライドを選択することができます。
例のオプション
例
イングランド南西部とパリへの旅
9月14日から9月24日又は27日まで
Foyleの戦争再訪
3月8日日曜日、午後8時、テレビで: 最終シーズンの先行上映。
アクセシビリティ機能
自動スライド回転の制御
利用者はスライドの回転を停止及び開始することができます。これは、障害を持つ様々な人々にとって、カルーセルのアクセシビリティの不可欠な側面です。 ロービジョンや、視覚処理や読解に影響を及ぼす認知障害のある人にとって、スライドの回転を制御できることは、スライドの内容を探索するのに十分な時間を確保できることになり、利益を得られます。 同様に、スクリーンリーダーの利用者は自動的な回転を知覚できないため、ページを読むことが混乱しやすく、方向感を失わせることがあります。 例えば、スライドが自動的に回転しているとき、スクリーンリーダーの利用者はスライド 1 の要素を読んで、次の要素を読むためのスクリーンリーダーのコマンドを実行するかもしれませんが、スライド 1 の次の要素を聞く代わりに、完全に新しいコンテキストからの要素であるスライド 2 の要素を聞くことになり得ます。
この例には、利用者がスライドの回転を制御するための以下の機能が含まれています:
- オペレーティングシステムの設定が動きの減少やアニメーションの無効化に設定されている場合、自動回転は初めから一時停止されます。
- カルーセルのいずれかのコンテンツにマウスをホバーすると、自動回転が一時停止します。 マウスがカルーセルから移動すると、キーボードのフォーカスなど、回転を防ぐ別の条件がトリガーされていない限り、自動回転が再開されます。
-
キーボードのフォーカスをカルーセルの任意のコンテンツ (タブの要素を含む) に移動すると、自動回転が一時停止します。
利用者が明示的に
再生
ボタンを押下したときのみ、自動回転が再開されます。 -
カルーセルには、自動回転を停止及び再開することができる回転制御ボタンも含まれています。
- 回転制御ボタンは、スクリーンリーダーの読み取り順序で最初の要素です。
- 回転制御ボタンは常に表示されているため、マウス、キーボード、支援技術、又はタッチを介して操作しているすべての利用者に利用できます。
- カルーセルが回転している場合、ボタンのアクセシブルな名前は
自動スライドショーを停止
となり、スライドが変更されていることをスクリーンリーダー利用者に通知するとともに、変更を停止する方法を提供します。 - カルーセルが回転していない場合、ボタンのアクセシブルな名前は
自動スライドショーを開始
となります。 - 利用者が回転制御ボタンを活性化して回転を開始する場合、利用者が自動回転をすぐに開始したいと考えていると想定され、カルーセル内のフォーカス又はホバーの状態は無視されます。回転は、再び回転制御ボタンが押下されるまで停止することはありません。
- この例には、自動スライド回転を完全に無効にするオプションが含まれています。 このオプションが選択されると、開始/停止ボタンはレンダリングされず、スライドはタブコントロールの活性化を通じてのみ回転することができます。
テキストと回転制御の色のコントラスト
このカルーセルのビューでは、コントロールとキャプションが画像内に表示されている場合、背景画像によってコントロールとテキストの色のコントラストが不十分になる可能性があります。 しかし、このビューには、この潜在的な問題を防ぐための以下の機能が含まれており、WCAG 2.1 の色のコントラスト要件を満たしています:
- スライドのレンダリングを制御するタブが画像内にある場合、タブには WCAG 2.1 の色のコントラスト要件を満たす前景色と背景色があります。 さらに、フォーカスのスタイリングは、コントロールがキーボードのフォーカスを受け取ったときにフォーカスインジケーターが非常に目立つようにする SVG 画像を使用しています。
- キャプションエリアの透明度が減少しているため、キャプションテキストは WCAG 2.1 の色のコントラスト要件を満たしています。
画像内にあるコントロールとテキストの色のコントラストの問題を回避する一つの方法は、コントロールを画像の外に配置することです。 コントロールとテキストを固定背景上に移動にすることで、著者には色のコントラストを制御するのが、利用者にはそれを知覚するのが簡単になります。 このテクニックの一例はビューオプションのうちのひとつです。
タブリストとタブのフォーカススタイリング
- タブがフォーカスを受け取ると、タブリスト全体もボーダーでハイライトされ、利用者にグループ内のコントロール間を移動するために矢印キーが使用されることを示す手がかりが提供されます。
- フォーカススタイリングに使用される CSS ボーダーの幅は、コントロールがフォーカスを受け取るときに0ピクセルから2ピクセルに変更され、オペレーティングシステムの高コントラストオプションが有効になっているときのフォーカスの可視性をサポートします。
スライドの変更のスクリーンリーダーの読み上げ
自動回転がオフになっている場合、カルーセルのスライドコンテンツはライブリージョンに含まれています。 これにより、スクリーンリーダーの利用者がカルーセルのスライドをスキャンするのが簡単になります。 スクリーンリーダーの利用者が新しいタブを押下すると、新しいスライドのコンテンツが読み上げられ、コンテンツを操作するかどうかを判断するための即時のフィードバックが与えられます。 非常に重要なことに、自動回転がオンになっている場合、ライブリージョンは無効になっています。 そうでなければ、継続的に変更されるコンテンツの読み上げが利用者が読んでいる他のものを毎回中断するため、ページが使用できなくなります。
注記: 通常のタブにおいては、タブパネルをライブ領域にすることは推奨されません。 カルーセルの使用例では、コンテンツの迅速かつ軽量なスキャンが主な目的であるため、ライブ領域は自動回転を有する非スクリーンリーダー利用者の体験を模倣するために使用されます。
キーボードサポート
回転制御ボタン
| キー | 機能 |
|---|---|
| Tab |
|
| Enter 又は Space | カルーセル内のスライドの自動回転を切り替えます。 |
タブ
| キー | 機能 |
|---|---|
| Tab |
|
| Right Arrow |
|
| Left Arrow |
|
| Home | 最初のタブにフォーカスを移動し、最初のスライドを表示します。 |
| End | 最後のタブにフォーカスを移動し、最後のスライドを表示します。 |
ロール、プロパティ、ステート、及び tabindex 属性
回転制御
| ロール | 属性 | 要素 | 使用法 |
|---|---|---|---|
aria-label
|
button
|
アクセス可能な名前は、ボタンが実行するアクションを反映して変更されます:
|
タブ
| ロール | 属性 | 要素 | 使用法 |
|---|---|---|---|
暗黙の region ロール |
section
|
|
|
aria-roledescription="カルーセル"
|
section
|
|
|
aria-label="ハイライトされたテレビ番組"
|
section
|
カルーセル領域の内容を説明するラベルを提供します。 | |
aria-live="off"
|
div.carousel-items
|
|
|
aria-live="polite"
|
div.carousel-items
|
|
|
tablist
|
div
|
要素がタブのセットのコンテナとして機能することを示します。 | |
aria-label="スライド"
|
div
|
タブリストのアクセス可能な名前を提供します。 | |
tab
|
button
|
|
|
aria-label="スライド X"
|
button
|
タブのアクセス可能な名前を提供します。 | |
aria-selected="true"
|
button
|
|
|
aria-selected="false"
|
button
|
|
|
tabindex="-1"
|
button
|
|
|
aria-controls="IDREF"
|
button
|
タブに関連する tabpanel 要素を参照します。 |
|
tabpanel
|
div
|
|
|
aria-roledescription="スライド"
|
div
|
|
|
aria-label="Y枚中のX"
|
div
|
|
JavaScript 及び CSS のソースコード
- CSS: carousel-tablist.css
- Javascript: carousel-tablist.js
HTML ソースコード
<section id="myCarousel"
class="carousel-tablist"
aria-roledescription="カルーセル"
aria-label="ハイライトされたテレビ番組">
<div class="carousel-inner">
<div class="controls">
<button class="rotation" type="button">
<svg width="42"
height="34"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
class="svg-play">
<rect class="background"
x="2"
y="2"
rx="5"
ry="5"
width="38"
height="24"></rect>
<rect class="border"
x="4"
y="4"
rx="5"
ry="5"
width="34"
height="20"></rect>
<polygon class="pause" points="17 8 17 20"></polygon>
<polygon class="pause" points="24 8 24 20"></polygon>
<polygon class="play" points="15 8 15 20 27 14"></polygon>
</svg>
</button>
<div class="tab-wrapper">
<div role="tablist" aria-label="スライド">
<button id="carousel-tab-1"
type="button"
role="tab"
aria-label="スライド 1"
aria-selected="true"
aria-controls="carousel-item-1">
<svg width="34"
height="34"
version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle class="border"
cx="16"
cy="15"
r="10"></circle>
<circle class="tab-background"
cx="16"
cy="15"
r="8"></circle>
<circle class="tab"
cx="16"
cy="15"
r="6"></circle>
</svg>
</button>
<button id="carousel-tab-2"
type="button"
role="tab"
tabindex="-1"
aria-label="スライド 2"
aria-selected="false"
aria-controls="carousel-item-2">
<svg width="34"
height="34"
version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle class="border"
cx="16"
cy="15"
r="10"></circle>
<circle class="tab-background"
cx="16"
cy="15"
r="8"></circle>
<circle class="tab"
cx="16"
cy="15"
r="6"></circle>
</svg>
</button>
<button id="carousel-tab-3"
type="button"
role="tab"
tabindex="-1"
aria-label="スライド 3"
aria-selected="false"
aria-controls="carousel-item-3">
<svg width="34"
height="34"
version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle class="border"
cx="16"
cy="15"
r="10"></circle>
<circle class="tab-background"
cx="16"
cy="15"
r="8"></circle>
<circle class="tab"
cx="16"
cy="15"
r="6"></circle>
</svg>
</button>
<button id="carousel-tab-4"
type="button"
role="tab"
tabindex="-1"
aria-label="スライド 4"
aria-selected="false"
aria-controls="carousel-item-4">
<svg width="34"
height="34"
version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle class="border"
cx="16"
cy="15"
r="10"></circle>
<circle class="tab-background"
cx="16"
cy="15"
r="8"></circle>
<circle class="tab"
cx="16"
cy="15"
r="6"></circle>
</svg>
</button>
<button id="carousel-tab-5"
type="button"
role="tab"
tabindex="-1"
aria-label="スライド 5"
aria-selected="false"
aria-controls="carousel-item-5">
<svg width="34"
height="34"
version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle class="border"
cx="16"
cy="15"
r="10"></circle>
<circle class="tab-background"
cx="16"
cy="15"
r="8"></circle>
<circle class="tab"
cx="16"
cy="15"
r="6"></circle>
</svg>
</button>
<button id="carousel-tab-6"
type="button"
role="tab"
tabindex="-1"
aria-label="スライド 6"
aria-selected="false"
aria-controls="carousel-item-6">
<svg width="34"
height="34"
version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle class="border"
cx="16"
cy="15"
r="10"></circle>
<circle class="tab-background"
cx="16"
cy="15"
r="8"></circle>
<circle class="tab"
cx="16"
cy="15"
r="6"></circle>
</svg>
</button>
</div>
</div>
</div>
<div id="myCarousel-items"
class="carousel-items playing"
aria-live="off">
<div class="carousel-item active"
id="carousel-item-1"
role="tabpanel"
aria-roledescription="スライド"
aria-label="6枚中の1">
<div class="carousel-image">
<a href="#" id="carousel-image-1">
<img src="images/amsterdamslide__800x600.jpg" alt="アムステルダムでのウォーキングツアー">
</a>
</div>
<div class="carousel-caption">
<h3>
<a href="#">
ダイナミックヨーロッパ: アムステルダム、プラハ、ベルリン
</a>
</h3>
<div class="hidden-xs hidden-sm">
<p>
<span class="contrast">
3月3日火曜日、午後7時、テレビで
</span>
</p>
</div>
</div>
<!-- .carousel-caption -->
</div>
<!-- .item -->
<div class="carousel-item"
id="carousel-item-2"
role="tabpanel"
aria-roledescription="スライド"
aria-label="6枚中の2">
<div class="carousel-image">
<a href="#" id="carousel-image-2">
<img src="images/lands-endslide__800x600.jpg" alt="コーンウォールのLand's End">
</a>
</div>
<div class="carousel-caption">
<h3>
<a href="#">
イングランド南西部とパリへの旅
</a>
</h3>
<div>
<p>
<span class="contrast">
9月14日から9月24日又は27日まで
</span>
</p>
</div>
</div>
<!-- .carousel-caption -->
</div>
<!-- .item -->
<div class="carousel-item"
id="carousel-item-3"
role="tabpanel"
aria-roledescription="スライド"
aria-label="6枚中の3">
<div class="carousel-image">
<a href="#!" id="carousel-image-3">
<img src="images/trustslide-2__800x600.jpg" alt="母と娘がノートパソコンでダニエルタイガーゲームをプレイ">
</a>
</div>
<div class="carousel-caption">
<h3>
<a href="#">
公共テレビの素晴らしい子供向け番組
</a>
</h3>
<div></div>
</div>
<!-- .carousel-caption -->
</div>
<!-- .item -->
<div class="carousel-item"
id="carousel-item-4"
role="tabpanel"
aria-roledescription="スライド"
aria-label="6枚中の4">
<div class="carousel-image">
<a href="#" id="carousel-image-4">
<img src="images/foyleswarslide__800x600.jpg" alt="スーツとフェドラ帽をかぶった男と、髪を整えた女がカメラを厳しく見つめている。">
</a>
</div>
<div class="carousel-caption">
<h3>
<a href="#">
Foyleの戦争再訪
</a>
</h3>
<div>
<p>
<span class="contrast">
3月8日日曜日、午後8時、テレビで: 最終シーズンの先行上映。
</span>
</p>
</div>
</div>
<!-- .carousel-caption -->
</div>
<!-- .item -->
<div class="carousel-item"
id="carousel-item-5"
role="tabpanel"
aria-roledescription="スライド"
aria-label="6枚中の5">
<div class="carousel-image">
<a href="#" id="carousel-image-5">
<img src="images/britcomdavidslide__800x600.jpg" alt="WILL-TVのホスト、デビッド・シールとともに英国の旗。">
</a>
</div>
<div class="carousel-caption">
<h3>
<a href="#">
グレートブリテン投票: 土曜日午後7時
</a>
</h3>
<div></div>
</div>
<!-- .carousel-caption -->
</div>
<!-- .item -->
<div class="carousel-item"
id="carousel-item-6"
role="tabpanel"
aria-roledescription="スライド"
aria-label="6枚中の6">
<div class="carousel-image">
<a href="#" id="carousel-image-6">
<img src="images/mag800-2__800x600.jpg" alt="セットでのMid-American Gardenerのパネリスト">
</a>
</div>
<div class="carousel-caption">
<h3>
<a href="#">
Mid-American Gardener: 木曜日午後7時
</a>
</h3>
<div class="hidden-xs hidden-sm">
<p>
<span class="contrast">
最新のエピソードを見る。
</span>
</p>
</div>
</div>
<!-- .carousel-caption -->
</div>
<!-- .item -->
</div>
</div>
<!-- carousel-inner -->
</section>
<!-- /.carousel -->
<div class="col-sm-1"></div>