このワイヤーの特徴
何枚もの写真を、ページを長くせずに見せられる
大きな写真を1枚だけ表示し、ほかの写真は下に小さく並べて、ページを縦に長くせずに何枚もの写真を見てもらえるようにしています。
今どの写真を見ているかを、枠と枚数で示す
表示中の写真に当たる小さな写真には太い枠を付けて aria-current で示し、大きな写真の下には「1 / 6」の枚数を書いています。
写真の説明を、切り替えに合わせて変える
大きな写真の下の説明は、写真を切り替えるたびに書き換えています。
何の写真かが、写真と一緒に伝わります。
前後のボタンとキーボードでも送れる
大きな写真の左右に「前の写真」「次の写真」のボタンを置き、←→キーでも送れるようにしています。
SPでは小さな写真の一覧を横に並べ、指で送って選べるようにしています。
制作時のよくある失敗
小さな写真に、ボタンとしての名前がない
小さな写真だけのボタンは、読み上げで何のボタンか伝わりません。
「玄関の写真を表示」のように、写真の内容と操作が分かる名前を付けます。
写真の比率がばらばらで、切り替えるたびに高さが変わる
写真の比率が違うと、切り替えるたびに大きな写真の高さが変わり、下の情報が上下に動きます。
大きな写真の枠の比率を決め、写真をその中に収めます。
自動で写真が切り替わる
写真が自動で切り替わると、読み手が見ている途中で変わってしまいます。
切り替えは、読み手の操作に任せます。
大きな写真を、さらに拡大できない
細かいところを見たい読み手には、大きな写真でも足りないことがあります。
大きな写真を押したら画面いっぱいに拡大できるようにする方法があります（画像拡大型 モーダルを参照）。
よくある質問
小さな写真は、下に並べるのと横に並べるのと、どちらがよいですか?
写真が横長なら下、縦長なら横に並べると、大きな写真の面積を確保しやすくなります。
SPでは、どちらの場合も下に並べるのが一般的です。
写真は、最初に全部読み込んだほうがよいですか?
大きな写真を全部最初に読み込むと、ページの表示が遅くなります。
最初の1枚と小さな写真だけを読み込み、ほかの大きな写真は選ばれたときに読み込む方法があります。
小さな写真の数は、何枚くらいまでがよいですか?
1列に並ぶ6〜8枚程度が見渡しやすい目安です。
それ以上ある場合は、SPのように横に送れる一覧にするか、写真を絞ります。
