jQuery/Vanilla Javascript

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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
micromodal

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

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

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

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.cssmicromodal.min.jsを読み込みます。

IE11対応にpolyfill.min.jsも必要なのでmicromodal.min.jsの直前に読み込ませます。

<link href="css/micromodal.css" rel="stylesheet" type="text/css">
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<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>

こちらで基本的な設定は完了になります。
サンプルデモではIE11対応版になります。

サンプル

複数のモーダルを表示する場合はボタン部分のdata-micromodal-triggerとモーダル部分のidをそれぞれをmodal-1modal-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>

サンプル

モーダルウィンドウが表示されるような動きに関してアクセシビリティ対応が保証されているのはありがたいでね。

今後このようなガイドラインに準じたライブラリが増えていくと制作側としては クライアントへの提案に説得力が増します。

アクセシビリティ対応のモーダルライブラリでどのようなユーザでも快適に閲覧できるモーダルウィンドウを作成しましょう。

uhaha

ひと手間でIE対応ができるのでやっておいたほうがお得です。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメントを残す

*