このワイヤーの特徴
作業の流れを保ったまま、補足を読める
補足の情報をモーダルで開き、読み終えたら元の作業の場所に戻れるようにしています。
別のページへ移ると、入力の途中の内容や読んでいた位置を見失うことがあります。
開くリンクの名前で、中身を伝える
開くボタンは「キャンセルと日程変更の決まり」のように中身の名前にしています。
「こちら」「詳しくはこちら」では、何が開くのかが分かりません。
長い内容は、中身だけをスクロールさせる
題名と閉じるボタン、下のボタンは固定し、中身だけをスクロールさせています。
内容が長くても、閉じる方法を見失いません。
固定する部分は、本文の領域を圧迫しない高さにとどめます。
閉じる方法を、上と下の両方に置く
右上の「閉じる」と、読み終えた位置にある「内容を確認しました」の両方で閉じられるようにしています。
Escキーや背景を押しても閉じ、開いたボタンに戻ります。
制作時のよくある失敗
ページ全体の情報を、モーダルに詰め込む
利用規約の全文のような長い情報をモーダルに入れると、読みにくく、検索や共有もできません。
長い情報はページにし、モーダルには要点だけを入れます。
モーダルの中から、さらにモーダルを開く
モーダルの上に別のモーダルが重なると、読み手はどこに戻ればよいか分からなくなります。
重ねずに、1つのモーダルの中で内容を切り替えるか、ページへ移ります。
閉じるボタンが、スクロールで見えなくなる
閉じるボタンが中身と一緒にスクロールすると、読み終えたあとに閉じる方法を探すことになります。
閉じるボタンは固定して表示します。
開いたときに、後ろのページがスクロールする
モーダルの中をスクロールしたときに後ろのページまで動くと、閉じたあとに元の位置が変わります。
開いている間は後ろのページのスクロールを止めます。
よくある質問
情報表示のモーダルと、開閉式（アコーディオン）は、どう使い分ければよいですか?
ページの流れの中で続けて読んでもらう補足なら、開閉式のほうがページの内容として残ります。
作業の途中で一時的に確かめる情報なら、モーダルが向くと考えられます。
モーダルの中身は、検索エンジンに読まれますか?
ページのHTMLに含まれていれば読まれる可能性はありますが、開かないと見えない情報として扱われることもあります。
検索で見つけてもらいたい情報は、ページとして用意します。
モーダルは、dialog 要素で作ったほうがよいですか?
dialog 要素を showModal() で開くと、後ろのページを操作できない状態やEscキーで閉じる動きをブラウザが用意してくれます。
独自に作る場合は、role=dialog と aria-modal=true を付け、操作を閉じ込める処理と閉じたあとに元の場所へ戻す処理を自分で用意します。
