このワイヤーの特徴
関係の深いページを、行き来しやすい
関係の深いページをタブの形で並べ、どのページからも同じ並びでほかのページへ移れるようにしています。
ページごとにURLがあり、直接開ける
それぞれが別のページなので、ページごとにURLを持ち、検索や共有から直接開いてもらえます。
同じページの中で切り替えるタブでは、2つ目以降の内容を直接開きにくくなります。
表示中のページを、線と aria-current で示す
表示中のページのリンクには下に太い線を付け、aria-current=”page” を付けています。
見た目と読み上げの両方で、今いるページが分かります。
役割は、リンクのまま組む
ページを移るため、role=”tab” は付けず、nav の中のリンクとして組んでいます。
タブの見た目でも、操作の説明はリンクとして正しく伝わります。
制作時のよくある失敗
ページの移動に、タブの役割を付ける
リンクに role=”tab” を付けると、読み上げでは同じページの中で切り替わるように伝わり、実際にはページが移って食い違います。
ページを移るならリンクのまま組みます。
表示中のページが、見た目だけで示されている
線や色だけで示すと、読み上げでは今どのページにいるかが伝わりません。
aria-current=”page” を付けます。
並びの順番が、ページによって変わる
ページごとにタブの並びが変わると、読み手は迷います。
どのページでも同じ順番、同じ名前で並べます。
ページが多すぎて、1行に収まらない
5つ、6つとページが増えると、SPで収まらなくなります。
関係の深い4つ前後にしぼり、それ以上は別の一覧にします。
よくある質問
同じページの中で切り替えるタブと、どちらがよいですか?
内容を検索や共有で直接開いてもらいたい場合や、内容の量が多い場合は、ページを分けるこの型が向くと考えられます。
短い内容を見比べるだけなら、同じページの中で切り替えるタブで足ります。
ページを移ったあと、タブの位置まで画面が戻ってしまいます。
ページを移ると、画面は新しいページの先頭から表示されます。
タブの並びがページの上のほうにあれば、問題になりにくいと考えられます。
パンくずリストも必要ですか?
タブの並びは同じ階層のページの行き来に使い、パンくずリストは上の階層へ戻るために使います。
役割が違うため、両方を置くことがあります。
