Splideの読み上げラベルを日本語化する

スライダープラグイン Splide を使うとき、読み上げのテキストを気にしたことはあるでしょうか？

Splide はアクセシビリティへの配慮が非常に行き届いていて、特に何をせずともスライダー内の要素に適切なラベルを付与してくれます。

しかしこの読み上げラベル、デフォルトでは英語で付与されます。（まあそうですよね）

例えば、次のスライドへ進む矢印ボタンには「Next slide」という aria-label が付与されます。

<button aria-label="Next slide" ...>...</button>

これをこのまま日本語サイトに導入すると「スライダーの要素だけ突然英語で読み上げられる...」という困った状態になってしまいます。

ということで、Splideを日本語のサイトに導入する際は必ずテキストを日本語に変更しておきましょう。
これはSplideのオプション i18n で簡単に対応ができます。

私は多くの場合次のように設定しています。¹

new Splide('.splide', {
  i18n: {
    prev: '前のスライドに移動する',
    next: '次のスライドに移動する',
    first: '最初のスライドに移動する',
    last: '最後のスライドに移動する',
    slideX: 'スライド%sに移動する',
    pageX: 'ページ%sに移動する',
    play: 'スライダーを再生する',
    pause: 'スライダーを一時停止する',
    carousel: 'スライダー',
    select: '表示スライドを選択する',
    slide: 'スライド',
    slideLabel: '%s枚目（%s枚中）',
  },
});

ただしこれはあくまでも一例です。
ドキュメントに次のような説明があるように、文脈や内容に応じて適切な文言を設定することが重要です。

ただし、アクセシビリティのためのテキストは、より内容に沿ったものであるほうが親切です。たとえば、記事の一覧を表示する場合は、「次のスライドへ移動する」ではなく「次の記事へ移動する」のほうがより適切だと言えます。

まとめ

Splideはアクセシビリティへの配慮が行き届いている素晴らしいライブラリです。

ただし使い手がきちんと使い方を理解していないと逆にアクセシビリティを損なう結果にもなりかねません。私もこれからもラベルは忘れずにきちんと設定するようにしたいです。

また「そもそもカルーセルスライダーを気軽に採用しない」というのも大事な考えですね。。😶

参考

ローカライズ - Splide
HTML構造 - Splide
アクセシビリティ - Splide
カルーセル | Accessible & Usable
みんなが使えるカルーセルUIを考える | CyberAgent Developers Blog

slideLabel はできれば ◯枚中◯枚目 としたかったのですが、Splideがこのテキストの入れ替えには対応していなかったので断念しました。 ↩

まとめ

参考

Footnotes