Splideは「アクセシビリティに配慮した軽量・高機能スライダー」と謳っています。
使ってみると、その謳い文句に劣らず、確かにアクセシビリティに非常に気をつかわれていることが分かります。
このSplideの公式ドキュメントにはアクセシビリティに関するページが単独で存在し、（当たり前ですが）そもそもWebアクセシビリティに明るくないと半分も理解できません。少なくとも私は完全に理解した状態でした。
そこで、W3Cのドキュメント等も踏まえカルーセルのアクセシビリティについて理解を深めつつ、Splideについても噛み砕いていきたいと思います。（かなり時間がかかった）
カルーセルのW3Cデザインパターンを確認
バージョン4から、W3CのCarousel Design Patternに準拠した上で、スクリーンリーダーが動的にコンテンツを読み上げられるようライブリージョンも導入しました。
まずは、Splideが準拠しているという、W3Cのカルーセルのデザインパターンを確認していきます。
今後の話は、これを前提に進められていきますので、ここが理解できないことには何も始まりません。
WAI-ARIAについても記載がありますが、こちらのセクションにはまとめず、Splideの説明に組み込みながら見ていきます。
“十分な”カルーセル制御に必要なもの
カルーセルに必要な機能は以下の通りであると示されています。
前と次のスライドを表示するためのボタン
オプションとして、表示する特定のスライドを選択するためのコントロール、またはコントロールのグループ
カルーセルを自動スクロールさせる場合
回転を停止・再開するためのボタンがある
キーボードのフォーカスがカルーセルに入ると回転が停止する
マウスがカルーセルの上に乗っている間は回転を停止する
キーボードインタラクション
自動スクロールさせる場合
カルーセル内の要素にキーボードのフォーカスが当たった時は、スライドの自動スクロールは停止させます。
ユーザが自動スクロールの再生・停止ボタンを押さない限り、回転は再開されません。
TabキーとShift + Tab
通常のタブ順序によって指定されたカルーセルのインタラクティブ要素にフォーカスを移動します。
Tabキーのためのスクリプトは必要ありません。
ボタン要素
ボタン要素は、ボタンパターンで定義されたキーボードインタラクションを実装します。
自動スクロールの開始・停止、スライドを次・前へ動かすボタンは、何度でも繰り返し押せるようにします。
自動スクロールの開始・停止コントロール
自動スクロールコントロールは、カルーセル内のタブ順序中で最初の要素にします。
回転するコンテンツの前に置くことが重要です。
ページネーションをタブ要素で使う場合
ここで言うページネーションは、カルーセルの下についてるドットなどで表示される、任意のスライドに移動できるコントロールのことです。
これをタブ要素で使う場合は、Media Web Terpercaya Tabsパターンで定義されたキーボードインタラクションを実装します。
share