[JS]jQueryで実装するアクセシブルでフレキシブルなタブ

アクセシブルでフレキシブルなタブを実装するスクリプトをweb outputから紹介します。

デモのキャプチャ

jQuery Accessible Tabs - How to make tabs REALLY accessible
demo

スクリーンリーダー、スクリプトオフ時の対応をはじめ、タブ箇所の充分なホットスポット、アクティブなタブのハイライト、a href="#"の不使用、キーボードでの操作などを配慮して実装したとのことです。

オプションでは、タブに使用する要素やクラス名、パネル表示のモーション、スピードなどを設定できます。

デモは他に、YAMLを使用したものも公開されています。

デモのキャプチャ

demo 2

sponsors

top of page

©2024 coliss