アクセシブルなモーダルの実装方法：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   // 閉じるアニメーションを待つ
});

主な機能

オーバーレイクリックやEscキーでのモーダル閉鎖
aria-hidden属性による表示/非表示切り替え
モーダル内でのタブフォーカスのトラッピング
モーダル切り替え前後のフォーカス位置維持

利点

広いブラウザサポート: 古いブラウザでも動作
豊富なカスタマイズオプション: 様々な設定が可能
アクセシビリティ対応済み: WAI-ARIAガイドラインに準拠

実装の選択基準

ぽんきち

どちらの方法を選べばいいの？

プログラマーさん

以下の基準で選択するといいよ。

<dialog>要素を選ぶ場合

新しいプロジェクト: 最新のブラウザをターゲットにしている
シンプルな実装: 複雑なカスタマイズが不要
将来的な保守性: 標準仕様なので長期的に安定

Micromodal.jsを選ぶ場合

既存のプロジェクト: 古いブラウザもサポートする必要がある
高度なカスタマイズ: 細かい動作の調整が必要
豊富な機能: アニメーションやイベントハンドリングが必要

まとめ

モーダル実装時のポイント

スクロール制御: モーダル表示中は背景のスクロールを無効化する
フォーカス制御: モーダル内でフォーカスを適切に管理する
スクリーンリーダー対応: アクセシビリティを考慮した実装を行う

実装の流れ

まず<dialog>要素で実装を試す
ブラウザサポートが不十分な場合はMicromodal.jsを検討
必要に応じてカスタマイズを行う

重要: モーダルの実装は見た目だけでなく、すべてのユーザーが使いやすいものであることが大切です。適切な実装方法を選択することで、より良いユーザー体験を提供できます。

ぽんきち

なるほど！見た目だけでなく、使いやすさも大切なんだね。

プログラマーさん

そうだよ！ウェブサイトは見た目だけでなく、誰でも使いやすいものであることが大切なんだ。