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

サイト構築 -JavaScript

Post on:2017年10月10日

Micromodal.jsの特徴

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

Micromodal.jsのデモ

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

デモページ

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

デモのアニメーション

Micromodal.jsの使い方

Step 1: 外部ファイル

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

<body>
  ...
  コンテンツ
  ...
  <script src="micromodal.min.js"></script>
</body>

<body>

...

コンテンツ

...

</body>

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

<body>
  ...
  コンテンツ
  ...
  <script src="https://cdn.jsdelivr.net/npm/micromodal/dist/micromodal.min.js"></script>
</body>

<body>

...

コンテンツ

...

</body>

Step 2: HTML

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

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

<!-- [1] -->
<div id="modal-1" aria-hidden="true">

  <!-- [2] -->
  <div tabindex="-1" data-micromodal-close>

    <!-- [3] -->
    <div role="dialog" aria-modal="true" aria-labelledby="modal-1-title" aria-describedby="modal-1-content">

      <!-- [4] -->
      <div role="document">

        <header>
          <h3 id="modal-1-title">
            Modal Title
          </h3>

          <!-- [5] -->
          <button aria-label="Close modal" aria-controls="modal-1" data-micromodal-close></button>
        </header>

        <main id="modal-1-content">
          Modal Content
        </main>

      </div>
    </div>
  </div>
</div>

Modal Title

</h3>

</header>

Modal Content

</main>

</div>

Step 3: JavaScript

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

<body>
  ...
  コンテンツ
  ...
<script src="micromodal.min.js"></script>
<script>
MicroModal.init();
</script>
</body>

<body>

...

コンテンツ

...

MicroModal.init();

</script>

</body>

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

<body>
  ...
  コンテンツ
  ...
<script src="micromodal.min.js"></script>
<script>
MicroModal.init({
  onClose: modal => console.info(`${modal.id} is hidden`), // [1]
  onShow: modal => console.info(`${modal.id} is shown`) // [2]
});
</script>
</body>

<body>

...

コンテンツ

...

MicroModal.init({

onClose: modal => console.info(`${modal.id} is hidden`), // [1]

onShow: modal => console.info(`${modal.id} is shown`) // [2]

});

</script>

</body>

モーダルのスタイル

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

/**************************\
  Basic Modal Styles
\**************************/

.modal {
  font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
}

.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal__container {
  background-color: #fff;
  padding: 30px;
  max-width: 500px;
  max-height: 100vh;
  border-radius: 4px;
  overflow-y: auto;
  box-sizing: border-box;
}

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal__title {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  color: #00449e;
  box-sizing: border-box;
}

.modal__close {
  background: transparent;
  border: 0;
}

.modal__header .modal__close:before { content: "\2715"; }

.modal__content {
  margin-top: 2rem;
  margin-bottom: 2rem;
  line-height: 1.5;
  color: rgba(0,0,0,.8);
}

.modal__btn {
  font-size: .875rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: .5rem;
  padding-bottom: .5rem;
  background-color: #e6e6e6;
  color: rgba(0,0,0,.8);
  border-radius: .25rem;
  border-style: none;
  border-width: 0;
  cursor: pointer;
  -webkit-appearance: button;
  text-transform: none;
  overflow: visible;
  line-height: 1.15;
  margin: 0;
  will-change: transform;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  transition: -webkit-transform .25s ease-out;
  transition: transform .25s ease-out;
  transition: transform .25s ease-out,-webkit-transform .25s ease-out;
}

.modal__btn:focus, .modal__btn:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.modal__btn-primary {
  background-color: #00449e;
  color: #fff;
}

/**************************\

Basic Modal Styles

\**************************/

.modal {

font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;

}

.modal__overlay {

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: rgba(0,0,0,0.6);

display: flex;

justify-content: center;

align-items: center;

}

.modal__container {

background-color: #fff;

padding: 30px;

max-width: 500px;

max-height: 100vh;

border-radius: 4px;

overflow-y: auto;

box-sizing: border-box;

}

.modal__header {

display: flex;

justify-content: space-between;

align-items: center;

}

.modal__title {

margin-top: 0;

margin-bottom: 0;

font-weight: 600;

font-size: 1.25rem;

line-height: 1.25;

color: #00449e;

box-sizing: border-box;

}

.modal__close {

background: transparent;

border: 0;

}

.modal__header .modal__close:before { content: "\2715"; }

.modal__content {

margin-top: 2rem;

margin-bottom: 2rem;

line-height: 1.5;

color: rgba(0,0,0,.8);

}

.modal__btn {

font-size: .875rem;

padding-left: 1rem;

padding-right: 1rem;

padding-top: .5rem;

padding-bottom: .5rem;

background-color: #e6e6e6;

color: rgba(0,0,0,.8);

border-radius: .25rem;

border-style: none;

border-width: 0;

cursor: pointer;

-webkit-appearance: button;

text-transform: none;

overflow: visible;

line-height: 1.15;

margin: 0;

will-change: transform;

-moz-osx-font-smoothing: grayscale;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

-webkit-transform: translateZ(0);

transform: translateZ(0);

transition: -webkit-transform .25s ease-out;

transition: transform .25s ease-out;

transition: transform .25s ease-out,-webkit-transform .25s ease-out;

}

.modal__btn:focus, .modal__btn:hover {

-webkit-transform: scale(1.05);

transform: scale(1.05);

}

.modal__btn-primary {

background-color: #00449e;

color: #fff;

}

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

Micromodal.jsの特徴

Micromodal.jsのデモ

Micromodal.jsの使い方

Step 1: 外部ファイル

Step 2: HTML

Step 3: JavaScript

モーダルのスタイル

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Category

Blog Info

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

Micromodal.jsの特徴

Micromodal.jsのデモ

Micromodal.jsの使い方

Step 1: 外部ファイル

Step 2: HTML

Step 3: JavaScript

モーダルのスタイル

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Recommend

Category

Blog Info