Web制作者は要チェック!モーダルダイアログをアクセシブルに実装する超軽量スクリプト -Micromodal.js

ちょうどいいモーダルってなかなか見つからないんだよな、と探している人は要チェックです。シンプルで操作性もよく、アクセシブルに実装する超軽量の単体で動作するJavaScriptのライブラリを紹介します。

デモのキャプチャデモのアニメーション

Micromodal.js
Micromodal.js -GitHub

Micromodal.jsの特徴

デモのキャプチャ
  • WAI-ARIAガイドラインに準拠したモーダルダイアログを実装。
  • 1.9kbの超軽量のJavaScriptライブラリ。
  • aria属性でモーダルの開閉を切り替える。
  • オーバーレイをクリックすると、モーダルを閉じる。
  • escボタンを押すと、モーダルを閉じる。
  • モーダル内のタブをフォーカス。
  • モーダル内の最初のフォーカス可能な要素にフォーカスを合わせる。
  • モーダルを閉じた後、フォーカスされた要素の状態を保持。

Micromodal.jsのデモ

デモでは実際の動作を楽しめます。
モーダルを閉じるトリガーは、Closeボタン、Xボタン、オーバーレイのクリック、escボタンが用意されています。

サイトのキャプチャ

デモページ

モーダルが開く時、閉じる時のエフェクトも気持ちいいですね。

デモのアニメーション

デモのアニメーション

Micromodal.jsの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

ファイルはCDNでも用意されています。

Step 2: HTML

HTMLの基本構造です。用途に合わせて、カスタマイズしてご利用ください。

  1. モーダルの最も外側のコンテナ。すべてのモーダルが一意のIDを持つことが重要です。デフォルトでは、「aria-hidden」が「true」になります。
  2. モーダルのオーバーレイとして機能するdiv要素。「data-micromodal-close」はクリック時にモーダルの終了させるトリガーです。不要な場合は削除してください。
  3. 「role="dialog"」属性は、コンテンツがページの他の部分とは別のものであることを支援技術に知らせるために使用されます。
  4. ドキュメントのラッパー。「role="document"」はスクリーンリーダーなどにモーダル内の文書コンテキストについて知らせるのに役立ちます。
  5. すべてのボタンに、アクションを定義するaria-label属性を与えます。特に閉じるボタンに「data-micromodal-close」が使用されていることに注意してください。

Step 3: JavaScript

スクリプトを初期化して、実行します。

スクリプトのオプションでは、モーダルのオープンおよびクローズイベントで実行されるフックを渡すために使用できます。

モーダルのスタイル

デザインはCSSでカスタマイズすることができます。

top of page

©2017 coliss