English

Structure

HTML構造

基本構造

Splideは、root、track、listおよびslideの4つの構成要素から成り立っています。

<section class="splide" aria-label="基本構造の例">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">Slide 01</li>
      <li class="splide__slide">Slide 02</li>
      <li class="splide__slide">Slide 03</li>
    </ul>
  </div>
</section>
HTML

マークアップの際、ルート要素には適切なラベルを記載してください。もしスライダーの説明として適切な、目に見える形で見出しが存在する場合は、aria-labelではなくaria-labelledbyを使用して両者を関連付けます。

<section class="splide" aria-labelledby="carousel-heading">
  <h2 id="carousel-heading">基本構造の例</h2>


  <div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">Slide 01</li>
			<li class="splide__slide">Slide 02</li>
			<li class="splide__slide">Slide 03</li>
		</ul>
  </div>
</section>
HTML

また、<section>、<ul>および<li>の代わりに、<div>で記載しても正しく動作します。

W3Cはラベルにスライダー（カルーセル）という言葉を含めないよう推奨しています。これは、aria-roledescriptionにすでにcarouselが設定されているためです。スクリーンリーダのいくつかは「ラベル＋説明（description）」とアナウンスしてくれますが、仕様によるとこのふるまいは必須ではありません。実際、aria-roledescriptionの値を無視するスクリーンリーダも存在します。 個人的には、スライダーという言葉を含めても当面の間は問題ないと思います。含めることにより生じる問題は、単に同じような言葉を2回発声してしまうだけですので、大したものではありません（むしろスライダーであると告げないほうが不親切な気がします）。

ルート要素のロール

ランドマークロール

多くの支援技術は、ページ内の主要な部分であるランドマークの間を、簡単に遷移できる機能を提供しています。ランドマークを定義することは、目に見えない「目次」をユーザに提供していると考えればわかりやすいかもしれません。<section>は、有効なラベルが提供されている場合に限って、regionランドマークとして機能しますので、スライダーのルート要素に対して<section>を用いることは、単に<div>を用いるよりも多くの場合において適切です。

<section>の使用に抵抗を感じるかもしれませんが、<div>を用いた場合、Splideは自動的にrole="region"を挿入しますので、いずれにしてもルート要素はregionランドマークとしてふるまいます。

ロールがアクセシビリティにどのような影響を与えるか造詣が深い場合は、ページの構成に応じた、より適切なタグとロールを割り当ててください。そうでない場合は、<div>あるいは<section>を使用するにとどめてください。

グループロール

もしスライダーがそこまで重要ではない、あるいはメインのコンテンツとは直接関係がない場合は、role="group"を適用してください。

<div class="splide" role="group" aria-label="あまり重要ではないコンテンツ">
  <div class="splide__track">...</div>
</div>
HTML

HTMLの制限

古いバージョンに比べて、バージョン4ではより柔軟にスライダーのHTMLを構成できるようになりました。次の2点が約束される限りは、基本的にどのような構成でも問題ありません。

  • trackとlist要素には、任意の要素を追加できない
  • listはtrackの、slideはlistの子要素でなければならない

track要素は、ルートの直下に配置する必要がなくなったため、例えば次のような例は正しく動作します。

<section class="splide" aria-label="HTMLの制限の例">
  <div>
    <div>
      <div>
        <div class="splide__track">
          <ul class="splide__list">
            <li class="splide__slide">...</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>
HTML

ただし、次の例はtrackとlistが親子関係ではなくなっているため、動作しません。

<section class="splide" aria-label="無効なHTMLの例">
  <div class="splide__track">
    <div>
      <ul class="splide__list">
        <li class="splide__slide">...</li>
      </ul>
    </div>
  </div>
</section>
HTML

なお、親のスタイルがトラックやリストを壊さないよう十分注意してください。

スライドコンテナ

コンテナ要素の目的は、スライドの高さをスライド自身ではなく、スライド内に配置したコンテナに対して設定することにあります。こうすることで、スライド自体の高さは可変長になり、テキストなどのコンテンツにより動的に決定されることになります。特にcoverオプションを有効にする際に効力を発揮します。

コンテナを用いると、下の例のように、スライド内の一部分の高さを固定しつつ、スライド自体の高さは全体で最も高いスライドに合わせることができます。カード型のデザインなどでよく見るレイアウトですね。

  • 06
    Nibh veri dolor in eam. At homero volumus eos, ea vix quas omnes temporibus.
  • 07
    Feugiat quaerendum ad eam, at hinc graeci rationibus pri. Ei viris labitur consectetuer mei.
  • 08
    Suas inani rationibus duo ne, sit no epicurei dissentiet reprehendunt. Ea sed primis recteque consulatu.
  • 09
    Duis constituto eam ex, sit rebum nonumes eu. Ut sea summo consul necessitatibus.
  • 01
    Lorem ipsum dolor sit amet, in duo falli epicurei. Te has saperet veritus efficiendi.
  • 02
    Suas integre probatus vel ex, veniam qualisque tincidunt ius id.
  • 03
    Alii blandit accusamus usu cu, omnis neglegentur nec ex.
  • 04
    Mei facilisi erroribus ocurreret ei. Te soluta assueverit pri, has no tempor ceteros reprehendunt.
  • 05
    Primis delenit theophrastus at sea, sed scripta vocibus adipiscing ea. Timeam denique lucilius vix te.
  • 06
    Nibh veri dolor in eam. At homero volumus eos, ea vix quas omnes temporibus.
  • 07
    Feugiat quaerendum ad eam, at hinc graeci rationibus pri. Ei viris labitur consectetuer mei.
  • 08
    Suas inani rationibus duo ne, sit no epicurei dissentiet reprehendunt. Ea sed primis recteque consulatu.
  • 09
    Duis constituto eam ex, sit rebum nonumes eu. Ut sea summo consul necessitatibus.
  • 01
    Lorem ipsum dolor sit amet, in duo falli epicurei. Te has saperet veritus efficiendi.
  • 02
    Suas integre probatus vel ex, veniam qualisque tincidunt ius id.
  • 03
    Alii blandit accusamus usu cu, omnis neglegentur nec ex.
  • 04
    Mei facilisi erroribus ocurreret ei. Te soluta assueverit pri, has no tempor ceteros reprehendunt.

コンテナ要素は、スライドの中に.splide__slide__containerクラスを持った<div>などのタグとして配置します。スライド要素の直下に配置する必要があることに注意してください。

<section class="splide" aria-label="スライドコンテナの例">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">
        <div class="splide__slide__container">
          <img src="...">
        </div>
        Lorem Ipsum Dolor Sit Amet
      </li>
      <li class="splide__slide">
        <div class="splide__slide__container">
          <img src="...">
        </div>
        Lorem Ipsum Dolor Sit Amet
      </li>
    </ul>
  </div>
</section>
HTML

コンテナ要素が検出されると、Splideはheight、heightRatio、あるいはfixedHeightを、スライドではなくコンテナに対して適用するようになります。