はじめに
普段カルーセルを実装するのに、slick.jsをよく使用しています。
公式サイト：slick.js
slickドキュメント翻訳：slick - にほんご。
aria-hidden属性に対する警告
クライアントから検証ツールでアクセシビリティの警告が出ていると言われまして、どうにかせねばと思いました。
画像の警告文を見てみると以下が問題らしい。
【現在表示されているスライド（.slick-current）にaria-hidden="true"、tabindex="0"が設定されているのはよろしくないよ】
mora informationのページを見てみると、アクセシビリティで駄目な部分が書いていました。
aria-hiddenやtab-indexはWebアクセシビリティに関わる属性のことです。
詳しくはこちら
現状
・現状slickを実装すると以下のコードになります。
See the Pen slick_org by yoshida (@yoshi090) on CodePen.
以下はそれぞれ1枚目のスライド、2枚目のスライド時のコードのキャプチャです。
【1枚目】
【2枚目】
警告通り、現在のスライド（.slick-current）の部分がaria-hidden="true"かつtabindex="0"となっていますね。
解決方法
警告文の解決方法に従うと、現在のスライドのtabindexを-1にするか、tabindex自体を削除するかでいけるらしい。
そういう設定があるのかslickのドキュメントを見ると、accessibilityというのがある。
slick - にほんご。 accessibility
これはデフォルトでtrueなのだが、矢印キーでスライド可能にする設定をしているらしい。
とりあえずこれをfalseに設定してみる。
See the Pen slick_fix1 by yoshida (@yoshi090) on CodePen.
で、検証ツールを見てみると
tabindex消えた！
エラー検証も4つだった問題が3つになり消えた！
警告は消えたが・・・
結局accessibilityをfalseにして良いのか？矢印キーでスライドできなくなるけど。という懸念が残る。