モーダルウインドウ内のみキー操作可能にする方法
モーダルウインドウ内のみキー操作可能にする方法を紹介します。モーダルウインドウを表示している間は、TabキーやShift+Tabキーで移動できる範囲をモーダル内だけに制限し、背景ページにある入力欄やボタン、セレクトボックスへフォーカスが移動しないようにするサンプルです。キーボードだけで操作するユーザーでも迷わず利用できるモーダルウインドウを作成できます。
サンプルコードでは、モーダルウインドウを開くと入力欄・セレクトボックス・ボタンなどのフォーカス可能な要素を取得し、Tabキーで最後の要素まで移動した場合は先頭へ戻り、Shift+Tabキーで先頭の要素から移動した場合は最後へ戻るように制御しています。モーダルウインドウを閉じると通常どおりページ全体をキー操作できる状態へ戻ります。
ログイン画面や入力フォーム、確認ダイアログ、設定画面など、アクセシビリティを考慮したモーダルウインドウを作成したい場合に活用できます。HTML・CSS・JavaScriptだけで実装しているため、既存サイトにも導入しやすく、モーダル内の項目やデザインも自由にカスタマイズできます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
Tabキーでフォーカス移動を確認してください。
モーダル表示中は本文側へ移動できず、モーダル内だけを移動します。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン表示対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>モーダルウインドウ内のみキー操作可能にする方法</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- デモ全体 -->
<div class="modal-focus-trap_wrap">
<!-- タイトル -->
<h1 class="modal-focus-trap_title">
モーダルウインドウ内のみキー操作可能にする方法
</h1>
<!-- 説明文 -->
<p class="modal-focus-trap_text">
モーダル表示中はTabキーの移動範囲をモーダル内だけに制限します。
</p>
<!-- 本文側の操作要素 -->
<div class="modal-focus-trap_demo">
<!-- 本文入力欄 -->
<input type="text" placeholder="本文入力欄">
<!-- 本文セレクト -->
<select>
<option>本文セレクト</option>
<option>選択肢1</option>
<option>選択肢2</option>
</select>
<!-- モーダルを開くボタン -->
<button type="button" id="openModal">
モーダルを開く
</button>
</div>
</div>
<!-- モーダル背景 -->
<div class="modal-focus-trap_overlay" id="overlay">
<!-- モーダル本体 -->
<div class="modal-focus-trap_modal" id="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
<!-- モーダルタイトル -->
<h2 id="modal-title" class="modal-focus-trap_modal-title">
モーダルタイトル
</h2>
<!-- モーダル入力欄 -->
<input type="text" placeholder="モーダル入力欄">
<!-- モーダルセレクト -->
<select>
<option>モーダルセレクト</option>
<option>選択肢A</option>
<option>選択肢B</option>
</select>
<!-- OKボタン -->
<button type="button">
OK
</button>
<!-- 閉じるボタン -->
<button type="button" id="closeModal">
閉じる
</button>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。 HTMLでモーダルウインドウの画面構成を作成し、CSSでレイアウトやデザインを設定、JavaScriptでモーダルウインドウ内だけをTabキーで移動できるように制御しています。 モーダル表示中はフォーカス可能な要素を取得し、TabキーやShift+Tabキーを押してもモーダル外へフォーカスが移動しないため、アクセシビリティを考慮したモーダルウインドウを作成できます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
・index.html：本文側の入力欄・セレクトボックス・モーダルを開くボタンと、モーダル内の入力欄・セレクトボックス・ボタンを配置します。
・style.css：画面全体のレイアウト、モーダルのサイズ、背景色、余白、角丸、ボタンなどのデザインを設定します。
・script.js：モーダルの開閉処理と、Tabキー・Shift+Tabキーによるフォーカス移動をモーダル内だけに制御する処理を実装します。
設置方法・使い方
① sampleフォルダを作成します。
② index.html・style.css・script.jsの3ファイルを配置します。
③ index.htmlをブラウザで開きます。
④ 「モーダルを開く」ボタンをクリックします。
⑤ TabキーやShift+Tabキーを押すと、モーダル内の入力欄・セレクトボックス・ボタンだけを順番に移動し、本文側へフォーカスが移動しないことを確認できます。
カスタマイズできる内容
・index.htmlでは、本文側やモーダル内に配置する入力欄・セレクトボックス・ボタンの数や内容を変更できます。
・style.cssでは、モーダルの色・サイズ・余白・角丸・影・背景色などのデザインを自由に変更できます。
・script.jsでは、フォーカス対象にする要素を追加したり、キー操作の動作を変更したりできます。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssで「width:100%;」「max-width:420px;」「padding:20px;」を設定しているため、画面サイズに応じてモーダルの幅や余白が自動調整されます。また、640px以下では余白を調整し、スマートフォン・タブレット・PCでも快適に利用できます。
コメント