LoginSignup
5
4
@yoruakiin株式会社LIFULL

Stimulusでa11yを考慮した可変のカルーセルを実装する

Last updated at Posted at 2024-02-26

カルーセルのアクセシビリティを考慮しつつ、Stimulusで実装してみたいと思います。

カルーセルとは

文字通り訳すと「回転木馬」という意味ですが、情報 (画像だったり、画像＋テキストだったり) をパネル状に横に並べて、Web ページの幅を超えて隠れている情報も「くるくる」と手繰り寄せて表示できる、という UI です。

via: カルーセル | Accessible & Usable

「回転木馬」は、「メリーゴーラウンド」と言えば分かりやすいですかね。
ウェブサイト上でくるくる回るアレです。
自動でスライドするかどうかや、無限にループするかどうかは、仕様によります。

可変のカルーセルとは

表示領域が固定されているカルーセルはよくありますが、今回はこの表示領域がコンテンツ幅によって可変するカルーセルを実装してみたいと思います。
具体的には以下のようなものです。

See the Pen QIITA_STIMULUS_ACCESIBLE_VARIABLE_CAROUSEL by yoruaki (@yoruaki) on CodePen.

HTMLを書いてみる

<div
  role="group"
  aria-label="猫の写真"
  aria-roledescription="カルーセル"
>
  <div>
    <button type="button" aria-controls="carouselList">前</button>
    <button type="button" aria-controls="carouselList">次</button>
  </div>
  <ul
    role="none"
    aria-live="polite"
    aria-atomic="false"
    id="carouselList"
  >
    <li
      role="group"
      aria-label="3枚中1枚"
      aria-roledescription="スライド"
    >
      <a href="hoge">
        <img src="hoge.png" alt="">
        <span>hoge猫</span>
      </a>
    </li>
    <li
      role="group"
      aria-label="3枚中2枚"
      aria-roledescription="スライド"
      aria-hidden="true"
    >
      <a href="fuga" tabindex="-1">
        <img src="fuga.png" alt="">
        <span>fuga猫</span>
      </a>
    </li>
    <li
      role="group"
      aria-label="3枚中3枚"
      aria-roledescription="スライド"
      aria-hidden="true"
    >
      <a href="piyo" tabindex="-1">
        <img src="piyo.png" alt="">
        <span>piyo猫</span>
      </a>
    </li>
  </ul>
</div>

※装飾のためのclass属性などは一旦省略

要素の説明

要素 属性 説明
<div> 全体のラッパー。
role="group" ページ送りのボタン含む全ての要素がカルーセルの一部ということを示す。
aria-label="猫の写真" 何についてのカルーセルなのかを伝える。
今回は猫の写真のカルーセルであることを示している。
aria-roledescription="カルーセル" このリストの具体的な役割をスクリーンリーダーに伝える。
今回はカルーセルであることを示している。
<div> ページ送りボタンのラッパー。
<button> type="button" ボタン。
aria-controls="carouselList" このボタンは何を制御しているのか。
今回はカルーセル本体である#carouselList。
<ul> role="none" 子要素であるli要素にrole="group"を付与するため。
aria-live="polite" 要素に何か変更があったときに、変更内容をスクリーンリーダーなどの支援技術に伝える。
今回はボタンを押したことにより「どの猫の画像が表示されているか」を伝えたい。
aria-atomic="true" 要素に何か変更があったときに、変更箇所だけを読み上げるか（false）、全体を読み上げるか（true）。
今回は変更箇所だけを読み上げてほしかったのでfalseを指定。
id="carouselList" ページ送りボタンの制御先として指定。
<li> role="group" スライド。正直li要素じゃなくてもよかったかも。
aria-label="3枚中1枚" 今表示されているスライドが、何枚中何枚目なのかを伝える。
aria-roledescription="スライド" この要素の具体的な役割をスクリーンリーダーに伝える。
今回はスライドであることを示している。
aria-hidden="true" カルーセルの特徴的に、表示領域内以外のスライドはアクセシビリティツリー上から削除。
<a> href="hoge" リンク。
tabindex="-1" ページ送りボタンがあるので、アクティブなリンク以外のリンクはフォーカスしないように設定。
<img> src="hoge.png" 画像。
alt="" 代替テキスト。
リンク内画像だけど、今回は別でテキストがあるので空を指定。
<span> キャプション。

以上で意味的にはアクセシブルなカルーセルの完成です。
これを見て思うことは、ボタンでわざわざフォーカスを変えなきゃいけないだけの、ただの画像リンクリストなんですよね。
どちらも同等の情報取得ができるように、Stimulusで振る舞いをアタッチしていきます。

Carousel Controller

今回与えたい振る舞いは大まかに、ボタンをクリックすることで次もしくは前の画像に切り替わる（スライドするなどの動作はCSSで制御）こと、一番最後の画像で次ボタンをクリックしたら、一番最初の画像に切り替わること、一番最初の画像で前ボタンをクリックしたら、一番最後の画像に切り替わることです。

横並びにした画像の表示領域やアニメーションなどの見た目は全てCSSで制御するとして、機能としては最低限これだけでOKです。それ以外の機能は「仕様による」といった具合です。

まずは全体のラッパーにdata-controller="carousel"を付与して、Carousel Controllerを作ります。

<div
  role="group"
  aria-label="猫の写真"
  aria-roledescription="カルーセル"
  data-controller="carousel"
>
  <div>
    <button type="button" aria-controls="carouselList">前</button>
    <button type="button" aria-controls="carouselList">次</button>
  </div>
  .
  .
  .
</div>

次に取得したい要素にdata-carousel-target属性を付与します。
今回はカルーセル本体（ul要素）、スライド（li要素）、スライド内のリンクです。

カルーセル本体
<ul
  role="none"
  aria-live="polite"
  aria-atomic="false"
  id="carouselList"
  data-carousel-target="catList"
>
スライドとスライド内のリンク
<li
  role="group"
  aria-label="3枚中1枚"
  aria-roledescription="スライド"
  data-carousel-target="slide"
>
  <a href="hoge">
    <img src="hoge.png" alt="">
    <span>hoge猫</span>
  </a>
</li>
<li
  role="group"
  aria-label="3枚中2枚"
  aria-roledescription="スライド"
  data-carousel-target="slide"
  aria-hidden="true"
>
  <a href="fuga" tabindex="-1" data-carousel-target="link">
    <img src="fuga.png" alt="">
    <span>fuga猫</span>
  </a>
</li>
<li
  role="group"
  aria-label="3枚中3枚"
  aria-roledescription="スライド"
  data-carousel-target="slide"
  aria-hidden="true"
>
  <a href="piyo" tabindex="-1" data-carousel-target="link">
    <img src="piyo.png" alt="">
    <span>piyo猫</span>
  </a>
</li>

今回の可変カルーセルの要件

  • 「次」ボタンをクリックしたら、次の（右の）スライドを表示
  • 最後のスライドで「次」ボタンをクリックしたら、最初のスライドを表示
  • 「前」ボタンをクリックしたら、前の（左の）スライドを表示
  • 最初のスライドで「前」ボタンをクリックしたら、最後のスライドを表示
  • アクティブなスライドは左右中央に表示

要件は以上の5点です。
キーボード操作は特にありません。

次ボタンと前ボタンは左右キーで移動できた方がいいんじゃないか、などと考えたのですが、カルーセルは操作方法をOSから輸入できていないウェブ特有のUIのため、キーボード操作を実装してもユーザーが気づかない可能性があります。

「次」ボタンの挙動

まずは「次」ボタンをクリックしたら、次の（右の）スライドを表示を実装してみます。
HTMLはどちらも似たようなものなので、「前」ボタンも一緒にやってみます。

「次」ボタンと「前」ボタン
<div
  role="group"
  aria-label="猫の写真"
  aria-roledescription="カルーセル"
  data-controller="carousel"
>
  <div>
    <button
      type="button"
      aria-controls="carouselList"
      data-action="click->carousel#prevSlide"
    >
      前
    </button>
    <button
      type="button"
      aria-controls="carouselList"
      data-action="click->carousel#nextSlide"
    >
      次
    </button>
  </div>
  .
  .
  .
</div>

「次」ボタンなので「nextSlide」、「前」ボタンなので「prevSlide」です。
nextSlideの中身を見てみます。

「次」ボタンの挙動
nextSlide() {
  const slides = this.slideTargets;
  let catImageSize = 0;

  if (this.slideIndexValue === slides.length) {
    this.slideIndexValue = 0;
  }

  for (let i = 0; i <= this.slideIndexValue; i++) {
    catImageSize = catImageSize + slides[i].clientWidth;
  }

  catImageSize = catImageSize - slides[this.slideIndexValue].clientWidth / 2;
  this.moveSlide(catImageSize);
  this.activeSlide(this.slideIndexValue);
  this.slideIndexValue++;
}

内容の詳細は割愛しますが、簡単に説明すると、

  1. クリック時に表示されている画像がスライドの最後だったら、最初のスライドに戻る
  2. それ以外は全体を右に移動（マイナスマージン）
  3. 以降1.から繰り返し

「前」ボタンはその逆です。
やってることは至ってシンプル。

アクティブなスライドは左右中央に表示

まず表示させたい画像を横幅の半分（50vw）に移動させて、さらにそこからその画像の半分（clientWidth / 2）をずらして実現しています。
さらにアクティブなスライド以外のスライドには、aria-hidden="trueとtabindex="-1"を付与して、タブのフォーカスがいかないようにしています。

（2024/02/26 16:30追記）

aria-hiddenとtabindexの制御は、inert属性使うと楽だよとアドバイスいただきました。
inert属性を付与すると、アクセシビリティツリーから消えるだけじゃなく、その中のフォーカス可能な要素もフォーカス不能になるそうです。お得！
inert - HTML: ハイパーテキストマークアップ言語 | MDN

最後に

アクセシビリティを考慮したカルーセルをStimulusで実装してみました。
既存のコードなどを見てみると、一瞬複雑そうに見えますが、一つ一つ紐解いてみると理解が深まりますね。

無限ループについて

上記で〆ようと思ったのですが、やっぱりカルーセルと言ったら無限にループするのを連想しますよね。最初のスライドの前に最後のスライドが、最後のスライドの次に最初のスライドが来てるやつ。

自力で実装しようと思ったのですが、正直やり方が全然思いつきませんでした（個人で実装を請け負った時に要件に入ってた場合、素直にSwiperJS使わせてもらってます）。
ので、ChatGPTに聞いてみたり、「カルーセル 無限ループ」などで検索したのですが、イマイチよく分かりませんでした。

この記事を公開したあと、社内の優秀なフロントエンドエンジニアの方たちに聞いてみたいと思います。後日良い実装方法が分かったら追記するかもしれません。

5
4
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
4