Open2
Splideを日本語で使うときのi18nオプションのスニペット
Splideはアクセシビリティが考慮されたスライダーライブラリです。
ただし、デフォルトでaria-label等に設定されるラベルは英語です。
i18nオプションにラベルを設定することで変更することができます。
Splideをよく使うので毎回使っている、デフォルトのラベルをほぼそのまま日本語に翻訳した形のラベルを置いておく。
const splideI18nJapanese = {
prev: "前のスライドへ",
next: "次のスライドへ",
first: "最初のスライドへ",
last: "最後のスライドへ",
slideX: "%s枚目のスライドへ",
pageX: "%sページへ",
play: "自動再生を開始",
pause: "自動再生を停止",
carousel: "カルーセル",
select: "表示するスライドを選択",
slide: "スライド",
slideLabel: "%s枚目(%s枚中)",
};
new Splide( '#splide', {
i18n: splideI18nJapanese,
} );
// or
Splide.defaults = {
i18n: splideI18nJapanese,
};
ただし上記はあくまでデフォルトのラベルを日本語化しただけなので、最適とはいえない。
ドキュメントにもある通り、コンテキストに沿ったラベルにするほうがより望ましい。
ただし、アクセシビリティのためのテキストは、より内容に沿ったものであるほうが親切です。たとえば、記事の一覧を表示する場合は、「次のスライドへ移動する」ではなく「次の記事へ移動する」のほうがより適切だと言えます。
前に調べたとき記事が1つもなかったと思って書いたけど、今調べたら同じことを書いている方がいた!(被ってはしまったが、日本語化したい人がすぐコピペできる環境になっているならよかった)
自分のものは「移動する」を端折っていたりと若干違うのでこのまま残しておく。
「〇〇する」形のラベルを使いたい方は上記記事のコード例をどうぞ。