ライトボックス
Lightbox
別名: ライトボックス、Lightbox、画像拡大表示、フォトビューア
生態（さわってみる）
一言定義
サムネイル画像のクリックをきっかけに、暗転した背景の上に画像を拡大表示するオーバーレイUI。
分類
使う場面
- 画像ギャラリーなどで、ページ遷移せずに1枚の画像を大きく見せたいとき
- 複数枚の画像を前後に切り替えながら連続して閲覧させたいとき
避ける場面
- 画像以外の任意コンテンツ（フォームなど）を表示したいとき（→モーダル）
- 常に複数枚を横並びで自動送りしたいとき（→カルーセル）
近縁種との比較
モーダルとは背面を暗転させた前面オーバーレイという構造が共通するが、モーダルがフォーム入力など任意のコンテンツを載せる汎用の場であるのに対し、ライトボックスは画像・動画の拡大表示に用途を絞り、←→キーでの前後送りや現在の枚数表示といった画像ビューア特有の操作を備える点で異なる。カルーセルとは複数の画像・コンテンツを順に切り替える点が似ているが、カルーセルはページ内にインラインで常時表示され自動再生もあり得るのに対し、ライトボックスはサムネイルのクリックをきっかけに暗転オーバーレイとして開き、閲覧が終われば閉じて元の一覧に戻る一時的な表示という違いがある。
実例リンク
アクセシビリティ
- role
- role="dialog"+aria-modal="true"（ネイティブ<dialog>のshowModal()推奨）。現在の画像番号はrole="status"のaria-live="polite"な領域で告知する
- キーボード操作
- ←→キーで前後の画像へ切り替え、Escで閉じて元のサムネイルへフォーカスを戻す
- 補足
- NN/gはライトボックスの濫用に注意を促しており、画像以外の重要な操作をライトボックスに閉じ込める使い方は避けるべきとする