[JS]パネルがスムーズにスライドするアクセシブルなスクリプト

ニュースなど複数のコンテンツを配置したパネルがスムーズにスライドする、アクセシブルで軽量(3KB)なスクリプト「Accessible News Slider」を紹介します。

デモのキャプチャ

Accessible News Slider
demo

パネルはリスト要素で実装されており、テキストリンクと画像リンクでスムーズにスライドし、「view all」をクリックするとパネルの全内容を表示します。

「view all」でパネルの全部を表示したキャプチャ

「view all」でパネルの全内容を表示

また、アクセシビリティにも配慮されており、WCAG 1.0のアクセシビリティの必要条件を満たして実装しているとのことです。

スクリプトやスタイルシートのオフ時は下記の表示になります。

スクリプトのオフ時のキャプチャ

スクリプトのオフ時の表示

スタイルシートのオフ時のキャプチャ

スタイルシートのオフ時の表示

Accessible News SliderはjQueryのプラグインのため、実装にはjquery.jsが必要です。

sponsors

top of page

©2024 coliss