学習記録

学習したことをより深く理解するために、アウトプットする場所として利用しています。

Micromodal.js Document Translation (Introduction)

Introduction

Micromodal.js is a lightweight, configurable and a11y-enabled modal library written in pure JavaScript

Micromodal.jsは、純粋なJavaScriptで書かれた、軽量で設定可能なa11y対応のモーダルライブラリです。

It enables you to create WAI-ARIA guidelines compliant modal dialogs, with confidence and with minimal configuration. At just 1.9kb minified and gzipped, its a tiny library for big change.

WAI-ARIAガイドラインに準拠したモーダルダイアログを、最小限の設定で確実に作成することができます。最小化され、gzip圧縮された、わずか1.9kbの小さなライブラリは、大きな変化をもたらします。

サンプル省略

Following are some of the interactions handled by the library:-
・Closing modal on overlay click
・ Closing modal on esc button press
・Toggling aria-hidden attribute on modal
・Trapping tab focus within the modal
・Maintaining focus position before and after toggling modal
・Focusing on the first focusable element within the modal

以下は、同ライブラリーが扱うやりとりの一部である。
・オーバーレイ クリックでモーダルを閉じる
・esc ボタン押下でモーダルを閉じる
・モーダルで aria-hidden 属性を切り替える
・モーダル内でタブ フォーカスをトラップする
・モーダルの切り替えの前後でフォーカスの位置を維持する
・モーダル内で最初にフォーカス可能な要素にフォーカスを当てる

Reference Article

micromodal.vercel.app