この記事でわかること
- モーダルの実装方法
はじめに
まず、モーダルに必要な機能についてざっと整理します。
- ボタンをクリックするとモーダルが開く
- モーダル内のボタンをクリックすると、モーダルを閉じる
- 背景要素クリックで、モーダルが閉じる
- モーダルが開かれた時に背景を固定（背面コンテンツのスクロールを抑止）する
- 開閉アニメーション
- キーボード操作、webアクセシビリティ関連
- aria属性でモーダルの開閉を切り替える
- escボタンを押すと、モーダルを閉じる
- モーダル内の最初のフォーカス可能な要素にフォーカスを合わせる
- モーダルを閉じた後、フォーカスされた要素の状態を保持
実装方法
モーダルを実装する方法を2つ紹介します。
dialog要素を使う場合
dialog要素はブラウザの機能です。主要なブラウザ、ios safari 15.4以上で使え、キーボード操作、webアクセシビリティ対応も簡単です。
open()やclose()など、開閉に必要なメソッドが備わっています。
Micromodal.jsを使う場合
Micromodal.js は1.9kbの超軽量のJavaScriptライブラリで、webアクセシビリティに準拠したモーダルを実装できます。
比較
| 方法 | 開閉アニメーションの付与 | ios対応 | 背景クリックでモーダルが閉じる | キーボード操作、web アクセシビリティ |
|---|---|---|---|---|
| dialog要素 | △(jsで実装必要) | △(15.4未満で使えない) | ⭕️ | ⭕️ |
| Micromodal.js | ⭕️ | ⭕️ | ⭕️ | ⭕️ |
まとめ
- ios15.4未満での挙動を考慮する場合、Micromodal.jsを使った実装がオススメ、考慮しない場合はdialog要素を使った実装がオススメ
