【Vanilla Javascript】アクセシビリティ対応の軽量モーダルライブラリMicromodal.jsの使い方

Micromodal.js

今回はモーダル系ライブラリのMicromodal.jsをサンプルデモ付きで解説していきます。アクセシビリティ対応を謳っているので今後モーダルライブラリの主戦力になる可能性も十分考えられます。

Micromodal.jsとは
Micromodal.jsのインストール
Micromodal.jsの基本的な設定
複数のモーダルを表示する場合
まとめ

Micromodal.jsとは

特徴としてはVanilla Javascriptで記述されたアクセシビリティ対応の軽量ライブラリです。

W3Cの一部であるWebアクセシビリティを向上することを目的としている団体・組織で公開されている仕様書（WAI-ARIA ガイドライン）に準じていますので使いやすさが保証されています。

Micromodal.js公式サイト

Micromodal.jsのインストール

GitHub

GitHubからダウンロードする場合はこちら

CDNで読み込む場合

<script src="https://unpkg.com/micromodal/dist/micromodal.min.js"></script>

npmもしくはyarnでインストールする場合

npm install micromodal --save // via npm
yarn add micromodal --save // via yarn

micromodal.css

.modal {
  display: none;
}
.modal.is-open {
  display: block;
}

つづいてCSSの設定になります。上記を対応してからmicromodal.cssを読み込みます。こちらから参照できます。
GitHub：ghosh/micromodal.css

Micromodal.jsの基本的な設定

ファイルの読み込み

以下のようにmicromodal.cssとmicromodal.min.jsを読み込みます。

<link href="css/micromodal.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/micromodal/dist/micromodal.min.js"></script>

HTML

以下のようにボタンエリアにdata-micromodal-trigger="modal-1"を、
モーダル部分にid="modal-1"とclass="micromodal-slide modal"を記述します。

<!-- ボタンエリアです。 -->
<button class="modal__btn" data-micromodal-trigger="modal-1" role="button">micromodal</button>
<!-- ここからモーダルエリアです。 -->
<div id="modal-1" aria-hidden="true" class="micromodal-slide modal">
    <div class="modal__overlay" tabindex="-1" data-micromodal-close>
      <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title" >
        <header class="modal__header">
          <h2 id="modal-1-title" class="modal__title">ヘッダータイトル</h2>
          <button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
        </header>
        <div id="modal-1-content" class="modal__content">
            内容テキスト
        </div>
        <footer class="modal__footer"></footer>
      </div>
    </div>
  </div>

JS

<script>
    MicroModal.init();
</script>

See the Pen Micromodal demo by uhaha (@uhaha) on CodePen.

複数のモーダルを表示する場合

複数のモーダルを表示する場合はボタン部分のdata-micromodal-triggerとモーダル部分のidをそれぞれをmodal-1、modal-2とします。
ボタンエリアとモーダルエリアに分けてそれぞれ記述しておけば重なりの不具合も防げます。

<!-- ボタン1 -->
<button class="modal__btn" data-micromodal-trigger="modal-1" role="button">micromodal</button>
<!-- ボタン2 -->
<button class="modal__btn" data-micromodal-trigger="modal-2" role="button">micromodal</button>

<!-- モーダル1 -->
<div id="modal-1" aria-hidden="true" class="micromodal-slide modal">
…
</div>
<!-- モーダル2 -->
<div id="modal-2" aria-hidden="true" class="micromodal-slide modal">
…
</div>

See the Pen Micromodal multiple by uhaha (@uhaha) on CodePen.