ModaalはWCAG 2.0のレベルAAをサポートしているアクセシビリティに優れたモーダルウィンドウを実装することができるjQueryプラグインです。フォーカス切り替えやキーボードコントロールなど非常に使いやすく、そして見やすいデザインになっています。ハイクオリティなモーダルウィンドウを実装したい方は要チェックですね。
Modaal
以下はModaalの実際のデモページになります。
VIEW EXAMPLE、または各タイプのSHOW MODAALというボタンをクリックすることでモーダルウィンドウが開かれます。
フルスクリーンモード、Ajax、イメージギャラリー、動画、iFrame、インスタグラムなどといったコンテンツを表示させるさまざまなモーダルウィンドウのデモが用意されています。
スッキリしたデザインがとても見やすく、それでいて操作性にも優れているのが魅力的です。
表示させるコンテンツのタイプ（type）はオプションで指定します。値には以下のものがあります。
- ajax
- inline
- image
- iframe
- confirm
- video
また、ほかにもアニメーションの有無（fadeかnone）やアニメーションスピードの設定、背景カラー、オーバーレイの透明度、フルスクリーン、幅、高さなどといったさまざまなオプションが用意されています。
ユーザビリティ向上にも役立つアクセシビリティに優れたモーダルウィンドウを取り入れたい方は、ぜひチェックしてみてください。
Modaalのダウンロードや詳しい使い方は以下からどうぞ。
