このワイヤーの特徴
項目が多くても、すべての名前が見える
タブを縦に並べ、項目が増えても名前を折り返さずにすべて見せています。
横一列では収まらない数の項目も、同じ形で扱えます。
選んでいる項目を、線と背景で示す
選んでいる項目は左に太い線を付け、背景の色も変えています。
項目が多くても、今どれを見ているかが分かります。
縦に並ぶことを、キーボードの操作に合わせる
tablist に aria-orientation=”vertical” を付け、↑↓キーで項目を移動できるようにしています。
見た目の並びとキーの向きをそろえています。
SPでは、項目を2列に並べ直す
SPでは左の列を置く余裕がないため、項目を内容の上に2列で並べ直しています。
すべての項目名が1画面に見えるようにしています。
制作時のよくある失敗
左の列が広すぎて、内容が狭くなる
項目名に合わせて左の列を広げすぎると、内容の横幅が狭くなります。
いちばん長い項目名が収まる程度の幅にします。
縦に並んでいるのに、←→キーで移動させる
見た目が縦なのに←→キーで動くと、操作が分かりにくくなります。
縦に並べる場合は↑↓キーで移動し、aria-orientation=”vertical” で伝えます。
項目が多すぎて、左の列が画面より長くなる
項目が15、20と増えると、左の列をスクロールしないと選べなくなります。
項目をグループに分けるか、別のページに分けます。
内容の高さが項目ごとに大きく違う
内容が短い項目と長い項目が混ざると、切り替えるたびにページの高さが大きく変わります。
内容の量をそろえるか、長い項目は別のページにします。
よくある質問
縦タブと、サイドメニューは、どう違いますか?
縦タブは同じページの中で内容を切り替え、サイドメニューは別のページへ移ります。
別のページへ移るなら、リンクとして組み、表示中のページに aria-current を付けます。
SPでは、縦タブのままでもよいですか?
縦タブのままだと、左の列で内容の幅がとても狭くなります。
項目を上に並べ直すか、開閉式（アコーディオン）に切り替える形が向くと考えられます。
左の列を、スクロールしても残すべきですか?
内容が長い場合は、左の列を画面に残すと、ほかの項目へ移りやすくなります。
内容が短い場合は、残さなくても問題になりにくいと考えられます。
