アクセシブルなカルーセルを作成する

Robert Flack
Penny McLachlan
Penny McLachlan
LinkedIn Bluesky
Lucas Radaelli
Lucas Radaelli
X LinkedIn

公開日: 2025 年 9 月 29 日

好き嫌いは別として、カルーセルは広く使用され、リクエストされているパターンです。そのため、カルーセルを実装する際は、堅牢でアクセスしやすいものにする必要があります。ファースト ペイントでインタラクティブであり、メンテナンスが容易な宣言型であり、支援技術でテストされたセマンティック構造で構築されている必要があります。

ただし、カルーセルをアクセシブルにするのは難しいことがよくあります。フォーカスの管理、スクリーン リーダーの読み上げの適切な取得、画面外のインタラクティブ要素の処理は複雑であるため、多くのサイトのカルーセルはアクセシビリティに対応していません。こうした課題を踏まえ、Chrome チームは CSS Overflow Module Level 5 の一部として、インタラクティブな CSS カルーセルの開発に取り組み、Chrome 135 でリリースしました。

Chrome でこの機能を最初にリリースした後、コミュニティから多くのフィードバックが寄せられました。Google はこれらのフィードバックに対応するよう取り組んでいます。これには、個別のナビゲーション スクロール マーカーモードのサポートなどの新機能や、複数のバグの修正が含まれます。次に例を示します。

CSS Overflow 5 の機能を使用すると、初回ペイント時にインタラクティブな、堅牢でアクセシブルなカルーセルを作成できると考えています。この記事では、これらの機能を使用して長年のアクセシビリティの問題を解決する方法に焦点を当てて、その方法について説明します。

カルーセルの一般的な概要については、CSS を使用したカルーセルをご覧ください。UI は、すぐにアクセスできるとは限りません。常にページのアクセシビリティをテストする必要があります。

コードに入る前に、どのようなカルーセルを作成するのかを把握しておくことが重要です。適切なアクセシビリティ戦略は、ユーザーがコンテンツをどのように体験することを想定しているかによって異なります。この投稿では、一般的な 3 つのタイプについて説明します。

単一アイテムのカルーセル

画面に 1 つのアイテムが表示され、他のアイテムを選択するためのマーカーが表示されるカルーセル。

1 つのアイテムのカルーセルでは、一度に 1 つのスライドのみが完全に表示され、操作可能になります（ヒーロー バナーやスライドショーなど）。

自動的にページ分割されたカルーセル

複数のスライドが一度に表示されるカルーセル。

自動ページネーション カルーセルには、商品やテレビ番組のリストなどのコンテンツの「ページ」が表示されます。

複数アイテムのカルーセル

複数アイテムのカルーセルでは、カルーセル内の複数のアイテムが一度に表示されますが、ページネーションなしで個別にスクロールできます。

カルーセルの種類ごとに、アクセシビリティに関する考慮事項とベスト プラクティスが異なります。

単一アイテムのカルーセル

これは昔ながらのスライドショーです。一度に読み取られるのは 1 つの子要素のみですが、多くの場合、ユーザーは次のアイテムまたは前のアイテムの「ピーク」を見て、追加コンテンツに関するコンテキストのヒントを得ます。目的は、中央に表示されているスライドのみが操作可能になるようにすることです。

手順は次のとおりです。

ステップ 1: スクロール スナップで単一のフォーカスを適用する

スクロール コンテナが常にスライドに「スナップ」し、アイテムが中途半端な位置で止まらないようにするには、CSS スクロール スナップを使用します。これにより、スクロール後にアイテムが正しい位置に完全に「スナップ」され、クリーンなユーザー エクスペリエンスが実現します。

.carousel {
  scroll-snap-type: inline mandatory;
}
.item {
  scroll-snap-align: center;
}

スクリーン リーダーを使用しているユーザーは、カルーセルに入ったことと、スライドが切り替わったことを知る必要があります。これには、カルーセル コンテナにいくつかの ARIA 属性が必要です。


ARIA 属性
説明

role="region"
ページ上のランドマーク領域としてカルーセルを識別し、カルーセルへの移動を容易にします。

aria-label
「おすすめ商品のスライドショー」のように、わかりやすい名前を付けます。

aria-live="polite"
これが魔法の材料です。このリージョン内の変更（新しいスライドがスクロールして表示されたときなど）をユーザーを中断することなく丁寧に読み上げるよう、スクリーン リーダーに指示します。

HTML 構造は次のとおりです。

<div class="carousel" role="region" aria-label="Slideshow" aria-live="polite"> ... </div>

ステップ 3: 表示されているスライドのみをインタラクティブにする

これは、画面外のスライドのボタンやリンクにユーザーが誤ってタブ移動してしまうのを防ぐため、ユーザー補助機能にとって重要です。これを行うには、新しい scroll-state コンテナクエリと interactivity プロパティを使用します。

まず、interactivity: inert を使用して、すべてのスライド アイテムをデフォルトで非アクティブにします。次に、scroll-state コンテナクエリを使用して、ビューポートで現在「スナップ」されているスライドをターゲットにし、そのコンテンツを interactivity: auto に設定します。

.item {
  container-type: scroll-state;
}
/* Make all content inside slides inert by default */
.item > * {
  interactivity: inert;
  /* When a slide is snapped inline, make its content interactive */
  @container scroll-state(snapped: inline) {
    > .content {
      interactivity: auto;
    }
  }
}

この CSS を使用すると、ブラウザがフォーカス可能な項目を自動的に処理します。tabindex を管理するために JavaScript を使用する必要がなくなりました。scroll-state クエリは、現在のスライド以外のすべてのスライドを非アクティブにします。

ページ分割されたカルーセル

このパターンは、コンテンツがページにグループ化されている商品や選択肢のギャラリーでよく使用されます。コンテンツの表示方法に応じて、アクセシビリティは次の 2 つの方法で処理できます。

role="region" を含むコンテナを使用し、その中に role="tabpanel" を含む単一の要素を配置します。このタブパネルは、アクティブなタブまたはページを反映するようにコンテンツを更新します。

<div role="region" class="carousel" aria-label="Featured Products Carousel">
    <div role="tabpanel">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        ...
        <div class="item">Item n</div> </div>
    </div>
</div>

インタラクティビティを管理するには、view() タイムラインに関連付けられた巧妙なアニメーション トリックを使用します。これにより、タブオーダーは画面に現在表示されているアイテムにのみ到達します。

@keyframes interactive-when-visible {
  0% { interactivity: auto; }
}
.item {
  interactivity: inert;
  animation: interactive-when-visible steps(1);
  animation-timeline: view(inline);
}

コンテンツのリスト

コンテンツが基本的にリストである場合は、正しいセマンティクスのために <ul> 要素を使用します。

次に例を示します。

<div class="carousel" role="region" aria-label="Related Posts">
  <ul>
    <li><!-- Post 1 content --></li>
    <li><!-- Post 2 content --></li>
    <li><!-- Post 3 content --></li>
    <!-- ... -->
  </ul>
</div>

このパターンでは、インタラクティブ プロパティを使用して画面外のコンテンツを非アクティブにしないでください。そうすると、スクリーン リーダーが読み上げるアイテムの数に影響するため、すべてのコンテンツはアクセシビリティ ツリーに残しておく必要があります。

複数アイテムのカルーセル

このパターンは、複数の子要素が同時に表示され、読み取れるカルーセル用です。たとえば、e コマース サイトの [関連商品] セクションなどです。

これらのカルーセルは、ユーザーのフォーカスを一度に 1 つのアイテムに誘導するか、表示されているすべてのコンテンツに自由にアクセスできるようにするかという判断によって動作が異なります。

パターン 1: 表示されているアイテムの中にインタラクティブなアイテムが 1 つある

このモデルでは、複数のアイテムが表示されますが、インタラクティブなのはプライマリ アイテムまたは「現在の」アイテムのみです。他の表示項目は非アクティブになります。このパターンは、ユーザーに一連のアイテムを 1 つずつ案内するのに便利です。

これを正しく構築するには、前述の単一アイテムのカルーセルと同じアクセシビリティ パターンを使用する必要があります。これには以下が含まれます。

  • スクロール状態コンテナ クエリを使用して、非アクティブなアイテムにインタラクティビティ: inert を適用します。
  • すべてのアイテムがプライマリ ポジション（スクロールポートの中央など）にスナップできるように、アイテムの周囲に十分なパディングを追加します。これにより、1 つずつナビゲーションするモデルが意図的でスムーズに感じられます。

パターン 2: 表示されているすべてのアイテムがインタラクティブである

ユーザーがすべての表示項目を自由に操作できるようにすることが目標の場合は、コンテンツがすべてアクティブであることを確認することをおすすめします。

このパターンでは、次のようになります。

  • コンテンツが意味的にリストである場合は、<ul> 要素を使用します。これにより、スクリーン リーダーのユーザーに正しいコンテキストが提供されます。
  • インタラクティビティ管理（interactivity: inert）を使用しないでください。すべての表示コンテンツはユーザー補助ツリーに残し、キーボードのタブ移動でアクセスできるようにする必要があります。

まとめ

CSS Overflow 5 を使用すると、一般的なインタラクティブなカルーセル パターンを宣言的に構築でき、アクセシビリティに関する問題が軽減されます。セマンティック HTML、スクロール状態やインタラクティブ性などの最新の CSS、適切な ARIA ロールを組み合わせることで、ファースト ペイントでインタラクティブな、パフォーマンスが高くアクセシビリティに優れたエクスペリエンスを作成できます。

これらの新しい API をぜひお試しください。ただし、これらのパターンと API は、インタラクティブで高速かつアクセシブルなコンポーネントの構築を容易にするように設計されていますが、完全なユーザー補助機能テストに代わるものではありません。コードがアクセス可能で、ベースライン ターゲットで動作することを常に確認する必要があります。