このワイヤーの特徴
SPでも、すべての項目名が見える
SPではタブを縦に並ぶ開閉式に切り替え、横にスクロールしなくてもすべての項目名が見えるようにしています。
SPでは、複数の項目を同時に開ける
開閉式では、読みたい項目をいくつでも開いたままにできます。
タブのように1つずつしか見られない制約がなくなります。
それぞれの形に合った役割を付ける
PCではタブの役割（tab・tabpanel）、SPでは開閉ボタンの役割（aria-expanded）を付けています。
見た目だけを変えるのではなく、操作の説明もそれぞれの形に合わせています。
内容は、PCとSPで同じものを使う
見出し・説明・箇条書きは、PCとSPで同じ内容を使っています。
SPだけ内容が少ない、ということが起きないようにしています。
制作時のよくある失敗
SPで、タブの役割のまま開閉の見た目にする
見た目を開閉式に変えても role=”tab” が残っていると、読み上げで操作の説明が食い違います。
形を変えたら、役割も開閉ボタン（aria-expanded）に変えます。
PCとSPで、同じ内容を2回書く
同じ文章をタブ用と開閉式用に2回書くと、直すときに片方を直し忘れます。
内容は1つにまとめ、表示の仕組みだけを切り替える形にします。
SPで、すべての項目を閉じた状態にする
すべて閉じていると、内容があることに気づかれにくい場合があります。
ページの上部の説明だけで伝わりにくいときは、最初の項目だけ開いておくと、開閉できることが伝わりやすくなります。
開閉の印が分かりにくい
「＋」「－」や矢印がないと、押せば開くことが伝わりません。
開閉の印を置き、開いているかどうかを aria-expanded でも伝えます。
よくある質問
PCとSPで、HTMLを2つ用意する必要がありますか?
内容を2回書かずに済むように、1つのHTMLを JavaScript で組み替える方法や、見出しと内容を共通の部品にして両方で使う方法があります。
直す場所を1か所にすることが大切だと考えられます。
どの画面の幅で、切り替えればよいですか?
タブが1行に収まらなくなる幅で切り替えます。
項目の数と名前の長さによって変わるため、実際に幅を変えながら確かめます。
SPでも、タブのままのほうがよい場合はありますか?
項目が2〜3つで名前が短く、1行に収まる場合は、SPでもタブのままで問題ないと考えられます。
