はじめに

普段カルーセルを実装するのに、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に設定してみる。

で、検証ツールを見てみると

tabindex消えた！

エラー検証も4つだった問題が3つになり消えた！

結局accessibilityをfalseにして良いのか？矢印キーでスライドできなくなるけど。という懸念が残る。