このワイヤーの特徴
ページを長くせずに、同じ場所で切り替えられる
同じ形の情報を同じ場所に重ね、タブを押すだけで切り替えられるようにしています。
縦に並べるとページが長くなり、目的の内容を探してスクロールすることになります。
選んでいるタブを、形と色で示す
選んでいるタブは内容の枠とつながる形にし、ほかのタブと背景の色も変えています。
今どの内容を読んでいるかが、色だけでなく形でも分かります。
キーボードでも、タブを移動できる
tablist・tab・tabpanel の役割を付け、←→キーでタブを移動し、移動と同時に内容を切り替えるようにしています。
選んでいないタブは Tabキーの移動から外し、内容へすぐ進めるようにしています。
SPでは、タブを横にスクロールさせる
SPではタブが画面に収まらないため、横にスクロールさせています。
タブが多い場合は、SPで縦に並べ直す形も検討します。
制作時のよくある失敗
大切な内容を、2つ目以降のタブに隠す
読み手の多くは、最初に表示されたタブの内容しか読まない傾向があります。
全員に読んでもらいたい情報は、タブの外に出します。
タブの名前が長く、折り返してしまう
タブの名前が2行に折り返すと、並びが崩れて読みにくくなります。
名前は短くし、収まらない場合は縦タブやほかの型を検討します。
ページの移動にタブの役割を付ける
別のページへ移るリンクに role=”tab” を付けると、読み上げで操作の説明が食い違います。
ページを移るなら、リンクとして組みます（ページ切り替えタブ型 タブを参照）。
選んだタブが、URLに残らない
特定のタブを開いた状態を人に知らせたい場合、URLに残らないと最初のタブが開いてしまいます。
必要に応じて、URLの末尾（#）で開くタブを指定できるようにします。
よくある質問
タブの中の内容は、検索エンジンに読まれますか?
最初に読み込まれるHTMLや、読み込み後に組み立てられたページの中にある内容なら、非表示のタブでも検索エンジンは処理できると考えられます。
ただし、大切な情報はタブの中だけに閉じ込めず、最初のタブかタブの外に置くと安心です。
タブは、何個まで並べてよいですか?
決まった上限はありませんが、横一列に収まり、名前が折り返さない数が目安です。
PCで5つ前後を超える場合は、縦に並べる形が合うと考えられます。
タブを押したら、自動で内容を切り替えるのと、Enterで切り替えるのと、どちらがよいですか?
内容の表示が軽い場合は、←→キーで移動したときに自動で切り替える形が使いやすいとされています。
切り替えに時間がかかる場合は、Enterやスペースキーで切り替える形にします。
