モーダルウィンドウは、情報を整理して見せたり、ユーザーの注意を特定の操作に向けたりするのにとても便利な機能だね。基本的な開閉から、中身の工夫、そしてドラッグ機能まで、色々なことができるようになった！
でも、忘れてはいけないのが「アクセシビリティ」。特にモーダルのように、ページの通常の流れを一時的に中断する要素は、キーボードだけで操作する人や、スクリーンリーダー（画面読み上げソフト）を使っている人にとって、使い方を間違えると大きな壁になってしまうことがあるんだ。
このページでは、モーダルウィンドウを誰にとっても使いやすく、親切なものにするための重要なポイント、特に「フォーカストラップ」と「ARIA属性」の活用について詳しく見ていくよ。
アクセシブルなモーダルウィンドウとは、簡単に言うとこんな状態を目指すよ。
これらを実現するために、JavaScriptとARIA属性が大きな助けになるんだ。
モーダルが開いている間、ユーザーの操作対象はモーダル内に限定されるべきだよね。これをキーボード操作でも実現するのが「フォーカストラップ」と「フォーカス管理」だよ。
モーダルを開くボタン（トリガー）をクリックまたはEnterキーで押したら、JavaScriptでモーダル内の最初のフォーカス可能な要素（例えば、閉じるボタンや、最初の入力欄など）にプログラムでフォーカスを移してあげるんだ。element.focus()という命令を使うよ。
これがモーダルアクセシビリティの山場の一つ！モーダル内のTabキー操作で、フォーカスがモーダルの外に出てしまわないようにする仕組みだ。
keydown）を監視する。こうすることで、フォーカスはモーダルの中を永遠に循環し、外には漏れないようになるんだ。
モーダルを開く直前に、どの要素にフォーカスがあったか（通常はモーダルを開いたトリガーボタンだね）をJavaScriptで覚えておく。そして、モーダルが閉じられたら、覚えておいたその要素にfocus()でフォーカスを戻してあげるんだ。これで、ユーザーは操作の流れを見失いにくくなるよ。
ARIA属性は、HTML要素に「意味」や「状態」を付け加えて、スクリーンリーダーなどの支援技術に伝えるためのものだったね。モーダルでは、特に以下のARIA属性が重要になるよ。
role="dialog" または role="alertdialog":
モーダルウィンドウの最も外側の要素（通常は.modal-contentや、それを囲む要素）に指定する。「これはダイアログ（対話ウィンドウ）ですよ」と示す。ユーザーに重要な通知や警告をし、即座の反応を求める場合はalertdialogを使うよ（例：「エラーが発生しました。OKボタンを押してください」）。
aria-modal="true":
role="dialog"やrole="alertdialog"を指定した要素に、一緒にaria-modal="true"も指定する。これは「このダイアログが表示されている間は、背景のコンテンツは操作できませんよ（一時的に無視してくださいね）」と支援技術に伝える、とっても大切な属性だ。フォーカストラップと合わせて、モーダルの「モーダルらしさ」をアクセシブルに実現するのに役立つ。
aria-labelledby="ID名":
モーダルのタイトル（見出し）部分の要素にidを付けておき、そのidをモーダル本体のaria-labelledby属性の値として指定する。これで、モーダルが開いたときにスクリーンリーダーがまずそのタイトルを読み上げてくれるので、ユーザーは何のモーダルが開いたかすぐに理解できる。
aria-describedby="ID名" (任意):
モーダルの主要な説明文や内容部分にidを付けておき、それをaria-describedbyで関連付けることができる。モーダルの目的をより詳しく伝えたい場合に使うよ。
<!-- モーダルオーバーレイ -->
<div class="modal-overlay" id="accessibleModalOverlay">
<!-- モーダルコンテンツ -->
<div class="modal-content"
id="accessibleModalContent"
role="dialog" <-- ダイアログであることを示す -->
aria-modal="true" <-- モーダルであることを示す (超重要！) -->
aria-labelledby="modalTitle_acc" <-- タイトルとの関連付け -->
aria-describedby="modalDesc_acc" <-- 説明文との関連付け (任意) -->
>
<div class="modal-header">
<h3 class="modal-title" id="modalTitle_acc">アクセシブルなモーダル</h3>
<button class="modal-close-button" aria-label="閉じる">×</button>
</div>
<div class="modal-body" id="modalDesc_acc">
<p>このモーダルはキーボード操作とARIA属性に対応しています。</p>
<label for="acc_name">お名前:</label>
<input type="text" id="acc_name" name="name">
</div>
<div class="modal-footer">
<button class="btn-secondary">キャンセル</button>
<button class="btn-primary">送信</button>
</div>
</div>
</div>
さあ、これまでのポイントを踏まえたアクセシブルなモーダルを体験してみよう！下のボタンをキーボードのEnterキーで開いて、TabキーやShift+Tabキー、Escキーで操作してみてね。スクリーンリーダーを使っている人は、読み上げも確認してみてね。
このデモでは、モーダルが開くと「ユーザー名」の入力欄にフォーカスが移動し、Tabキーでモーダル内を循環します。Escキーで閉じると、元の「アクセシブルなモーダルを開く」ボタンにフォーカスが戻るはずです。
アクセシビリティの専門用語に触れてみよう！
意味：フォーカストラップ（キーボードフォーカスを特定の領域内に閉じ込める技術）
Original: Implementing a focus trap is essential for modal dialog accessibility.
意訳：フォーカストラップを実装することは、モーダルダイアログのアクセシビリティにとって不可欠です。
dialog, alertdialog)
意味：ARIAロール（HTML要素の役割を定義するARIA属性）
Original: The 'dialog' ARIA role indicates that the element is a dialog window.
意訳：「dialog」ARIAロールは、その要素がダイアログウィンドウであることを示します。
aria-modal, aria-labelledby)
意味：ARIA属性（要素の状態やプロパティを定義するARIAの属性）
Original: aria-modal="true" tells assistive technologies that content outside the dialog is inert.
意訳：aria-modal="true"は、ダイアログ外のコンテンツが不活性であることを支援技術に伝えます。
意味：支援技術（障害を持つ人々を助けるための技術やツール。例: スクリーンリーダー、音声認識ソフト）
Original: Web developers should test their sites with various assistive technologies.
意訳：ウェブ開発者は、様々な支援技術で自分のサイトをテストすべきです。
今回は、モーダルウィンドウを誰にとっても使いやすくするためのアクセシビリティ対応、特にキーボード操作とARIA属性の活用について詳しく学んだね。
role="dialog", aria-modal="true", aria-labelledby などのARIA属性を適切に使って、スクリーンリーダーに情報を正しく伝える。アクセシビリティは、ウェブサイトを作る上で「おまけ」ではなく「必須」の考え方だ。少し手間がかかるように感じるかもしれないけど、この工夫が、より多くの人が君の作ったウェブサイトを快適に使えるようにすることに繋がるんだ。
さて、これでモーダルウィンドウに関する主要なテクニックは一通り網羅できたね！次のページでは、この第3章で学んだモーダルウィンドウについてのおさらいと、関連する英単語をまとめてチェックしよう！