NO IMAGE

JavaScript

WAI ARIAに準拠したアクセシブルなアコーディオン「ARIA ACCORDION」

ARIA ACCORDIONは、WAI ARIA 1.1に準拠したアクセシブルなアコーディオンを実装することができるjQueryプラグインです。圧縮版で5KB程とファイル容量も軽量で、カスタマイズ性にも優れています。

SASS・SCSSファイルも用意

ARIA ACCORDION

デモでは垂直型のアコーディオンが2つ(グループ1とグループ2)設置されています。タイトル部分をクリックするとコンテンツが表示される仕組みです。

新しいコンテンツが開かれると、現在開かれているコンテンツが同時に閉じられます。操作性も簡単でとても見やすいアコーディオンです。

シンプルで素早くUIをカスタマイズするための、SASS・SCSSファイルも用意されているほか、多彩なオプション設定も可能です。

主なオプション項目は、accGroupClass、accClass、accHeadClass、accHeadingClass、accBtnClass、accCollapseClass、accContentClass、accExpandedClass、accBtnExpandedClass、accCollapseExpandedClass、accContentRole、fadeSpeed、expandOnPageLoad、expandOnlyOne、keyInteractionなどがあります。

アコーディオングループの設定やフェードスピードの調節など、細かいセッティングをオプションから手軽にカスタマイズ可能です。

というわけで、WAI ARIA準拠のアクセシブルなアコーディオンを実装したいという人は、ぜひ「ARIA ACCORDION」を活用されてみてはいかがでしょうか? ライセンスはMITとのこと。

flubber滑らかなシェイプアニメーションを実装できる「flubber」前のページ

オーバーレイによるシンプルなアラートを実装できるjQueryプラグイン「simplert」次のページno-image

関連記事

  1. JavaScript

    レスポンシブ対応で画像やテキストも自由にスライドできるjQueryスライダー「Responsly.j…

    スマホにも対応したレスポンシブのjQueryスライダー「Respons…

  2. Simply Modal Box
  3. Reshader

    JavaScript

    カラーの濃淡を得ることができるJavaScriptライブラリ「Reshader」

    Reshaderは、カラーの濃淡を得ることができる便利なJavaScr…

  4. JQuery Clock

    JavaScript

    シンプルなアナログ時計を実装できる「JQuery Clock」

    JQuery Clockはシンプルなアナログ時計を実装できます。画像を…

  5. no-image

    JavaScript

    グリッドレイアウトによるシンプルで軽量なギャラリー「Grid Gallery」

    Grid Galleryはグリッドレイアウトによるシンプルで軽量なイメ…

  6. Fluidbox

    JavaScript

    シンプルで軽快な動作が素敵なLightbox風のjQueryプラグイン「Fluidbox」

    FluidboxというjQueryプラグインを使えば、シンプルで軽快な…

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP