アクセシビリティに対応したSlickの紹介

らら
らら

はじめに

アクセシビリティに対応したSlickを見つけたのでメモ書き・・

Slick Slider (1.8.1) のバージョンをベースに、 WCAG 2.0 / 2.1準拠にしてあるそうです。

accessible-slick

下記からダウンロード

https://github.com/Accessible360/accessible-slick

https://accessible360.github.io/accessible-slick/

本家と異なる部分があります。

下記のオプション・イベントが削除されているそうです。

accessibility

focusOnChange

追加されたオプション

focusOnSelect

Setting Type Default Description
arrowsPlacement string ('beforeSlides' | 'afterSlides' | 'split') null 前矢印と次矢印をスライダー DOM のどこに配置するかを決定し、タブ順序を決定します。矢印は、スライドの前または後にまとめて配置することも、前の矢印がスライドの前にあり、次の矢印がスライドの後になるように分割することもできます(これがデフォルトです)。この設定を使用して、WCAG 1.3.2 および2.4.3 を満たすビジュアル デザインに基づいてタブ順序が論理的であることを確認します。
instructionsText string null スライダーマークアップの最初に配置されたスクリーンリーダーユーザー向けの指示。asNavForを使用している場合、またはAPIメソッド/イベントでカスタム機能を追加している場合は、おそらく手順を提供する必要があります。
pauseIcon string (html | jQuery selector) | object (DOM node | jQuery object) <span class="slick-pause-icon" aria-hidden="true"></span> 有効になっている場合、自動再生の一時停止/再生トグルボタン内の「一時停止」アイコンとして使用するカスタム要素。autoplay
playIcon string (html | jQuery selector) | object (DOM node | jQuery object) <span class="slick-play-icon" aria-hidden="true"></span> 有効になっている場合、自動再生の一時停止/再生切り替えボタン内の「再生」アイコンとして使用するカスタム要素。autoplay
regionLabel string 'carousel' ラッパーに配置されるために使用するテキスト。aria-label
useGroupRole boolean true 各スライドに適用するかどうかをコントロールします。role="group"aria-label
useAutoplayToggleButton boolean true 自動再生が有効になっているときに一時停止/再生アイコン ボタンを追加するかどうかを制御します。代替コントロールを提供せずにこれを設定すると、WCAG 2.2.2 に違反する可能性があるため、注意してください。false

設置方法

本家と変わりません。。。

いろいろほかに説明があると思うので・・

うちのは下記から

slickの記事はこちらから
https://www.omakase.net/blog/2021/12/slick.html


<html>
  <head>
    <title>My Now Amazing Webpage</title>
    <link rel="stylesheet" type="text/css" href="slick/slick.css">
    <link rel="stylesheet" type="text/css" href="slick/accessible-slick-theme.css">
  </head>
  <body>
    <div class="your-class">
      <div>your content</div>
      <div>your content</div>
      <div>your content</div>
    </div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="slick/slick.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $('.your-class').slick({
          setting-name: setting-value
        });
      });
    </script>
  </body>
</html>

さいごに

とりあえず、自分用のメモ

関連

WebアクセシビリティJIS X 8341-3

記事
https://www.omakase.net/blog/2023/04/webjis-x-8341-3.html

アクセシビリティに配慮したクロスブラウザHTML5メディアプレーヤー Able Player

記事
https://www.omakase.net/blog/2023/04/html5-able-player.html

ARIAに対応したjQuery input validation

記事
https://www.omakase.net/blog/2023/05/ariajquery-input-validation.html

アクセシビリティに対応jQueryプラグイン「Accessible Mega Menu」

記事
https://www.omakase.net/blog/2023/07/accessible-mega-menu.html

アクセシビリティに対応したSlickの紹介

記事
https://www.omakase.net/blog/2023/07/accessible-slick.html

関連記事