このワイヤーの特徴
写真を、ページを移らずに大きく見られる
一覧の写真を押すと画面いっぱいに拡大し、閉じると一覧の同じ位置に戻れるようにしています。
前後の写真へ、順番に移れる
「前の写真」「次の写真」のボタンと←→キーで、拡大したまま前後の写真へ移れるようにしています。
何枚目かを「2 / 4」で示し、全体のどこを見ているかを伝えています。
移ったときは「3 / 4、相談室の写真」のように、枚数と写真の内容を読み上げでも知らせています。
写真の説明を、拡大した画面にも残す
拡大した写真の下に説明を表示しています。
一覧で読んだ説明が拡大した画面で消えると、何の写真か分からなくなります。
背景を暗くして、写真に集中させる
背景を濃く暗くし、写真と説明、操作のボタンだけが目に入るようにしています。
閉じるボタンは右上に文字で置いています。
制作時のよくある失敗
一覧の写真のボタンに、名前がない
写真だけのボタンは、読み上げで何の写真か伝わりません。
「外観を拡大する」のように、写真の内容と操作が分かる名前を付けます。
拡大した写真が、画面からはみ出す
縦長の写真や大きな写真をそのまま表示すると、画面に収まらずスクロールが必要になります。
画面に収まる大きさに縮めて表示します。
閉じるボタンが、写真と重なって見えない
白い写真の上に白い×を置くと見えなくなります。
写真の外に置くか、背景の付いたボタンにします。
SPで、写真の拡大と縮小ができない
SPでは指で広げて細部を見たい読み手がいます。
拡大の画面で、指での拡大を止めないようにします。
よくある質問
拡大した画面で、スワイプで前後に移れるようにしたほうがよいですか?
SPではスワイプで移れると便利ですが、スワイプだけにすると気づかない読み手もいます。
前後のボタンも合わせて置くと、どちらでも操作できます。
写真の alt には、何を書けばよいですか?
一覧と拡大のどちらでも、写真が伝えている内容を短く書きます。
説明の文と同じ内容の場合は、重ならないように書き分けます。
モーダルは、dialog 要素で作ったほうがよいですか?
dialog 要素を showModal() で開くと、後ろのページを操作できない状態やEscキーで閉じる動きをブラウザが用意してくれます。
独自に作る場合は、role=dialog と aria-modal=true を付け、操作を閉じ込める処理と閉じたあとに元の場所へ戻す処理を自分で用意します。
