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とのこと。

関連記事

  1. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでJavaScriptのfor…inを使ってオブジェクトから値を1つずつ取り…

    JavaScriptにはfor...inというプロパティの数だけ繰り返…

  2. ptrLight

    JavaScript

    モバイル用のリフレッシュインジケーターを実装できる「ptrLight」

    ptrLightはモバイル用のリフレッシュインジケーターを実装すること…

  3. CaptionerJs

    JavaScript

    画像に開閉できるキャプションを実装できるjQueryプラグイン「CaptionerJs」

    CaptionerJsは画像に開閉できるキャプションを実装することがで…

  4. stickyNavbar.js
  5. no-image
  6. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryで要素を挿入できるメソッドがたくさんあるので整理してみた

    jQueryでHTML要素を追加するメソッドが色々あるので整理するため…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP