WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： いっちー
カテゴリー： プログラム >JavaScript

Web業界では、近年アクセシビリティに関して、注目が集まっています。
今後、アクセシビリティに対応したサイトを作る際には、自動再生のスライダーには、再生・停止をつける必要があります。今回はアクセシビリティに配慮したカルーセルスライダーの作り方について紹介します。

アクセシビリティに配慮されている状態とは？

アクセシビリティに配慮されている状態とは、デジタル庁「ウェブアクセシビリティ導入ガイドブック」には、下記の状態と記されています。

• 目が見えなくても情報が伝わる・操作できること
• キーボードだけで操作できること
• 一部の色が区別できなくても情報が欠けないこと
• 音声コンテンツや動画コンテンツでは、音声が聞こえなくても何を話しているかわかること

今回紹介する内容以外にも、気を付けなければならないことがたくさんあります。ぜひ、皆様も調べてみてください。

必須なオプション【accessibility: true;】について

まずは、アクセシビリティ対応する上で、必須なオプションであるaccessibility: true;について紹介します。

このオプションは、キーボード操作やスクリーンリーダーなどのアクセシビリティを向上させるためのオプションです。trueにするとキーボードの矢印でスライダーを操作できるようになります。

$(document).ready(function(){
　　$(".slick").slick({
    　　accessibility: true;
    });
});

スライドを停止・再生できるボタンの作り方

それでは作り方を紹介していきます。
下記HTML・jsによって作ることができます。cssはデザインに合わせて付けてください。
・HTML

<div class="slick">
    <div class="slide"><img src="test1.jpg"></div>
    <div class="slide"><img src="test2.jpg"></div>
    <div class="slide"><img src="test3.jpg"></div>
    <div class="slide"><img src="test4.jpg"></div>
</div>

<div class="btnarea">
    <button class="slide_stop">停止</button>
    <button class="slide_start">再生</button>
</div>

・JavaScript

$(document).ready(function(){
　　$(".slick").slick({
　　　　autoplay: true,
　　　　autoplaySpeed: 1000,
　　　　accessibility: true,
    });
　　// 「停止」がクリックされたら一時停止
    $(".slide_stop").on("click", function() {
        $(".slick").slick("slickPause");
    });
　　// 「再生」がクリックされたら再開
    $(".slide_start").on("click", function() {
        $(".slick").slick("slickPlay");
    });
});

「停止」が押されたら、スライダーを一時停止し、「再生」が押されたら、自動再生を再開する処理をしています。

まとめ

今回は、アクセシビリティに対応したカルーセルスライダーの作り方についてをご紹介しました。
ぜひ活用してみてください。