アクセシブルなモーダルの実装方法：HTML標準要素からライブラリまで

ぽんきち

モーダルって、画面の前面にコンテンツを重ねて表示する要素だよね？簡単そうに見えるけど、実は難しいって聞いたよ。

プログラマーさん

そうなんだよね。見た目は簡単そうでも「アクセシビリティ」を考えると、実は複雑な実装が必要になるんだ。

モーダル実装でよくある問題

1. スクロールの問題

モーダルが表示されているのに、裏側のコンテンツがスクロールできてしまうことがあります。これにより、ユーザーが混乱したり、意図しない操作をしてしまう可能性があります。

2. フォーカスの問題

モーダル表示中にTabキーでキーボード操作を行うと、裏側のコンテンツにフォーカスが移動してしまうことがあります。これでは、モーダル内の操作に集中できません。

3. スクリーンリーダーの問題

スクリーンリーダーを使用しているユーザーにとって、モーダルの状態が正しく伝わらないことがあります。例えば、モーダルが開いているのに、スクリーンリーダーが裏側のコンテンツを読み上げ続けてしまうなどです。

解決方法1：HTML標準の<dialog>要素

ぽんきち

HTML標準の要素があるなら、それを使った方が良さそうだね。

プログラマーさん

そうだね！<dialog>要素を使うと、ブラウザがキーボードフォーカスやスクリーンリーダーの挙動を自動的にケアしてくれるんだ。

基本的な使い方

<dialog id="modal">
  <h2>モーダルタイトル</h2>
  <p>モーダルの内容がここに入ります。</p>
  <button onclick="this.closest('dialog').close()">閉じる</button>
</dialog>

<button onclick="document.getElementById('modal').showModal()">
  モーダルを開く
</button>

dialogで使えるJavaScriptメソッド

<dialog>要素には以下のメソッドが用意されています：

show(): モーダルを表示します（背景の操作は可能）
showModal(): モーダルを表示します（背景の操作は不可）
close(): モーダルを閉じます

利点

自動的なアクセシビリティ対応: ブラウザが自動的にキーボードフォーカスやスクリーンリーダーの挙動を処理
シンプルなコード: 複雑なJavaScriptが不要
標準仕様: 将来的なブラウザサポートが期待できる

注意点

ブラウザサポート: Chrome・Edge 114以降、Safari 17.0以降、Firefox 125以降で対応
iOS Safari: 裏側スクロール現象が発生する可能性がある（CSSのoverscroll-behaviorプロパティで対策可能）

解決方法2：Micromodal.jsライブラリ

ぽんきち

ブラウザサポートが心配な場合は、ライブラリを使うのがいいの？

プログラマーさん

そうだよ。Micromodal.jsは、jQueryに依存せず、WAI-ARIAのガイドラインに準拠しているアクセシブルで軽量なライブラリなんだ。

セットアップ

まず、HTMLファイルにライブラリを読み込みます：

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

HTMLの構造

<div class="modal" id="modal-1" aria-hidden="true">
  <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 class="modal-title" id="modal-1-title">
          モーダルタイトル
        </h2>
        <button class="modal-close" aria-label="モーダルを閉じる" data-micromodal-close></button>
      </header>
      <main class="modal-content">
        <p>モーダルの内容がここに入ります。</p>
      </main>
    </div>
  </div>
</div>

<button data-micromodal-trigger="modal-1">
  モーダルを開く
</button>

JavaScriptの初期化

MicroModal.init({
  disableScroll: true,        // 背景のスクロールを無効化
  awaitOpenAnimation: true,   // 開くアニメーションを待つ
  awaitCloseAnimation: true   // 閉じるアニメーションを待つ
});