slickのslick-dotsで「aria-hidden」問題を解決する
記事を書いた人：Webデザイナー 新謙二
Web制作に役立つ js ライブラリの小粒な Tips をご紹介します。
今回はWebサイトのTOPページなどでよく利用するjsライブラリ「slick」で、「.slick-dots」で利用される<button>の「aria-hidden」が、画像の表示・非表示に連動してボタンも「aria-hidden="true"」or「aria-hidden="false"」と切り替わってしまう問題についての解決方法をお伝えします。
問題点
この問題点は、画像が表示されていない時にも「.slick-dots」が連動して「aria-hidden="true"」になってしまいます。この場合画像は表示されていなくても、「.slick-dots」の<button>は表示されているため本来は「aria-hidden="false"」が正解になります。
この記述が間違っていることで、音声ブラウザで利用された際にボタンについて間違った操作方法が伝わる可能性があります。
解決策
当初、海外など色々な情報を探しましたが、解決法がわからずでした。
そこで他のサイトはどうかと、最近作った別のサイトを確認したところ、slickを使っていても新しいバージョンではこの問題が解決していることに気付きました。
いつから大丈夫になったのか分かりませんが、今回利用していた古い「slick.js ver1.4.1」では「aria-hidden」問題がおきますが、最新の「slick.js ver1.8.0」（2024/4/19時点）では解決されていました。
新しいサイトを立ち上げる際は js などのライブラリも最新にしますが、過去に作った古いサイトの場合は、そのまま古いライブラリを使っている場合もあります。もし同じ症状に遭遇した場合は、ライブラリを新しくしてみると改善するかもしれません。
Webサイトで利用するjsライブラリなどは、セキュリティの問題もありますので、定期的に確認をするなど最新で運用されることをお勧めいたします。
・slick
slickのオフィシャルサイトはこちら