JavaScript（脱jQuery）
アクセシビリティ対応のモーダルウインドウ
Micromodal.js
アクセシビリティ対応のモーダルウインドウが実装できる、jQuery非依存の超軽量ライブラリ「Micromodal.js」です
「Micromodal.js」は、Webアクセビリティ(a11y)に対応したJavaScript製モーダルライブラリです。
・公式GitHubページ
Micromodal.js – Tiny javascript library for creating accessible modal dialogs
Micromodal.jsの主な特徴
- ファイルサイズが軽量（1.9kb）
- WAI-ARIAガイドラインに準拠
- jQueryに依存しないピュアなJavaScriptで書かれている
- キーボード操作が可能
- 余計なスタイルがあたっていない
- MITライセンス
オプション
| onShow | モーダルが開かれた時に呼び出されます。 |
|---|---|
| onClose | モーダルが閉じられた時に呼び出されます。 |
| openTrigger | 起動用マークアップを指定できます。(デフォルト： data-micromodal-trigger) |
| closeTrigger | 閉じる用マークアップを指定できます。(デフォルト： data-micromodal-close) |
| openClass | モーダルが開かれているときに付与されるクラス名を指定できます。(デフォルト： is-open) |
| disableScroll | モーダル起動時のスクロールを禁止することができます。(デフォルト： false) |
| disableFocus | モーダル起動時に最初の要素にフォーカスされるのを止めることができます。(デフォルト： false) |
| awaitOpenAniamtion | モーダル起動時のアニメーションを待ってから最初の要素にフォーカスされます。(デフォルト： false) |
| awaitCloseAnimation | モーダルを閉じられるときにアニメーションを待ちます。(デフォルト： false) |
| debugMode | trueの場合コンソールの警告を抑制します。(デフォルト： false) |
Micromodal.jsで出来ること
- 背景クリックするとモーダルを閉じる
- escボタンを押すとモーダルを閉じる
- モーダルのaria-hidden属性の切り替え
- モーダル外はTab移動の対象から外す
- モーダル内の最初のフォーカス可能な要素にフォーカスする
- モーダルが開いている間は後ろのコンテンツを操作出来ないように背景スクロールを固定する
- モーダルを閉じた時に、ダイアログを呼び出した要素にフォーカスを戻す