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

この例について

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

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

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

例のオプション

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

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

読み込み時に自動回転を一時停止（

再読み込みが必要）

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

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

自動回転を無効にする

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

例

ダイナミックヨーロッパ: アムステルダム、プラハ、ベルリン

3月3日火曜日、午後7時、テレビで

イングランド南西部とパリへの旅

9月14日から9月24日又は27日まで

公共テレビの素晴らしい子供向け番組

Foyleの戦争再訪

3月8日日曜日、午後8時、テレビで: 最終シーズンの先行上映。

グレートブリテン投票: 土曜日午後7時

Mid-American Gardener: 木曜日午後7時

最新のエピソードを見る。

アクセシビリティ機能

自動スライド回転の制御

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

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

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

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

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

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

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

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

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

キーボードサポート

回転制御ボタン

キー	機能
`Tab`	カルーセル内のインタラクティブな要素を通してフォーカスを移動します。回転制御、前のスライド、次のスライドのボタンは、`Tab` の順序でスライドの内容よりも先に来ます。
`Enter` 又は `Space`	カルーセル内のスライドの自動回転を切り替えます。

次及び前のスライドボタン

キー	機能
`Enter` `Space`	カルーセル内の次又は前のスライドを表示します。

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

ロール	属性	要素	使用法
`region`		`section`	アクセス可能な名前を持つ任意の `section` 要素には `region` ロールが暗示されます。カルーセルとそのコントロールをランドマーク領域として明示します。
	`aria-roledescription="カルーセル"`	`section`	要素を「region」ではなく「カルーセル」として識別するように支援技術に知らせます。ランドマーク領域への移動のような機能には影響せず、支援技術がロールをどのようにレンダリングするかに影響します。注記: `aria-roledescription`の値はページの言語を使用して明示され、著者によってローカライズされる必要があります。
	`aria-label="ハイライトされたテレビ番組"`	`section`	カルーセル領域の内容を説明するラベルを提供します。
	`aria-live="off"`	`div.carousel-items`	すべてのスライドを含む`div`要素に適用されます。コンテナ要素を「off」状態のライブ領域として特定し、支援技術の利用者は領域の変更について通知されません。カルーセルが自動的に回転しているとき、ライブ領域はオフになります。
	`aria-live="polite"`	`div.carousel-items`	すべてのスライドを含む`div`要素に適用されます。コンテナ要素を「polite」状態のライブ領域として特定し、支援技術の利用者は次の利用可能な機会に領域の変更について通知されます。これにより、次のスライドボタンと前のスライドボタンがアクティブになったときにスクリーンリーダーが自動的にスライドの内容を読み上げます。
`group`		`div.carousel-item`	単一のスライドの内容を含む各要素に適用されます。支援技術の利用者がスライドの境界を知覚できるようにします。
	`aria-roledescription="スライド"`	`div.carousel-item`	要素を「group」ではなく「スライド」として識別するように支援技術に通知します。支援技術がロールをレンダリングする方法に影響を与えますが、`group`要素に関連する支援技術の機能を削除することはありません。注記: `aria-roledescription`の値はページの言語を使用して明示され、著者によってローカライズされる必要があります。
	`aria-label="N of 6"`	`div.carousel-item`	6 つのスライドのうちどれが表示されているかを利用者に理解させるための独自のラベルを各スライドに提供します。注記: 通常、アクセシブルな名前にセット位置とサイズ情報を含めることは適切ではありません。この実装では例外的に役立ちます。なぜなら、group 要素は `aria-setsize` 又は `aria-posinset` をサポートしていないからです。
	`aria-label="LABEL_STRING"`	`button`	自動回転の一時停止ボタン及び次／前のスライドボタンのアクセス可能な名前を明示します。
	`aria-controls="IDREF"`	`button`	ボタンが制御するページ上のコンテンツを特定します。すべてのスライドを含む `div` を参照します。

JavaScript 及び CSS のソースコード

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

HTML ソースコード

<section id="myCarousel"
         class="carousel"
         aria-roledescription="カルーセル"
         aria-label="ハイライトされたテレビ番組">
  <div class="carousel-inner">
    <div class="controls">
      <button type="button"
              class="rotation pause"
              aria-label="自動スライドショーを停止">
        <svg width="42"
             height="34"
             version="1.1"
             xmlns="http://www.w3.org/2000/svg">
          <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>
      <button type="button"
              class="previous"
              aria-controls="myCarousel-items"
              aria-label="前のスライド">
        <svg width="42"
             height="34"
             version="1.1"
             xmlns="http://www.w3.org/2000/svg">
          <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 points="9 14 21 8 21 11 33 11 33 17 21 17 21 20"></polygon>
        </svg>
      </button>
      <button type="button"
              class="next"
              aria-controls="myCarousel-items"
              aria-label="次のスライド">
        <svg width="42"
             height="34"
             version="1.1"
             xmlns="http://www.w3.org/2000/svg">
          <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 points="9 11 21 11 21 8 33 14 21 20 21 17 9 17"></polygon>
        </svg>
      </button>
    </div>
    <div id="myCarousel-items"
         class="carousel-items"
         aria-live="off">
      <div class="carousel-item active"
           role="group"
           aria-roledescription="スライド"
           aria-label="6枚中の1">
        <div class="carousel-image">
          <a href="#">
            <img src="images/amsterdamslide__800x600.jpg" alt="アムステルダムでのウォーキングツアー">
          </a>
        </div>
        <div class="carousel-caption">
          <h3>
            <a href="#" id="carousel-label-1">
              ダイナミックヨーロッパ: アムステルダム、プラハ、ベルリン
            </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"
           role="group"
           aria-roledescription="スライド"
           aria-label="6枚中の2">
        <div class="carousel-image">
          <a href="#">
            <img src="images/lands-endslide__800x600.jpg" alt="コーンウォールのLand's End">
          </a>
        </div>
        <div class="carousel-caption">
          <h3>
            <a href="#" id="carousel-label-2">
              イングランド南西部とパリへの旅
            </a>
          </h3>
          <div>
            <p>
              <span class="contrast">
                9月14日から9月24日又は27日まで
              </span>
            </p>
          </div>
        </div>
        <!-- .carousel-caption -->
      </div>
      <!-- .item -->
      <div class="carousel-item"
           role="group"
           aria-roledescription="スライド"
           aria-label="6枚中の3">
        <div class="carousel-image">
          <a href="#">
            <img src="images/trustslide-2__800x600.jpg" alt="母と娘がノートパソコンでダニエルタイガーゲームをプレイ">
          </a>
        </div>
        <div class="carousel-caption">
          <h3>
            <a href="#" id="carousel-label-3">
              公共テレビの素晴らしい子供向け番組
            </a>
          </h3>
          <div></div>
        </div>
        <!-- .carousel-caption -->
      </div>
      <!-- .item -->
      <div class="carousel-item"
           role="group"
           aria-roledescription="スライド"
           aria-label="6枚中の4">
        <div class="carousel-image">
          <a href="#">
            <img src="images/foyleswarslide__800x600.jpg" alt="スーツとフェドラ帽をかぶった男と、髪を整えた女がカメラを厳しく見つめている。">
          </a>
        </div>
        <div class="carousel-caption">
          <h3>
            <a href="#" id="carousel-label-4">
              Foyleの戦争再訪
            </a>
          </h3>
          <div>
            <p>
              <span class="contrast">
                3月8日日曜日、午後8時、テレビで: 最終シーズンの先行上映。
              </span>
            </p>
          </div>
        </div>
        <!-- .carousel-caption -->
      </div>
      <!-- .item -->
      <div class="carousel-item"
           role="group"
           aria-roledescription="スライド"
           aria-label="6枚中の5">
        <div class="carousel-image">
          <a href="#">
            <img src="images/britcomdavidslide__800x600.jpg" alt="WILL-TVのホスト、デビッド・シールとともに英国の旗">
          </a>
        </div>
        <div class="carousel-caption">
          <h3>
            <a href="#" id="carousel-label-5">
              グレートブリテン投票: 土曜日午後7時
            </a>
          </h3>
          <div></div>
        </div>
        <!-- .carousel-caption -->
      </div>
      <!-- .item -->
      <div class="carousel-item"
           role="group"
           aria-roledescription="スライド"
           aria-label="6枚中の6">
        <div class="carousel-image">
          <a href="#">
            <img src="images/mag800-2__800x600.jpg" alt="セットでのMid-American Gardenerのパネリスト">
          </a>
        </div>
        <div class="carousel-caption">
          <h3>
            <a href="#" id="carousel-label-6">
              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>