サイトの説明をタブで分ける？スマホで内容と相談先を見失わない決め方

タブを置く前に、見比べたいのか、一件を読みたいのかを決める

複数の説明を行き来して比べる用事なら、見出しと説明を開いたまま並べる案を先に検討します。読みたい一件を選んで集中する用事なら、タブも候補になります。PCで収まった見た目だけで、スマホの形を決めません。

架空の設備保守会社で、「定期点検」「修理相談」「部品交換」の違いを伝えるページを考えます。Web兼任担当と制作担当が、同じサービス原稿をどう見せるか相談している場面です。実会社の点検対象、修理条件、交換できる部品や料金は、この例には含まれていません。

二つの見せ方は、読める範囲が違う

• タブは、名前を選ぶと、その名前に対応する説明欄へ切り替わる部品です。一度に一つの欄を見せます。
• 見出しを並べた説明は、複数の内容を同じページに開いたまま置く配置です。縦に続けて読み、必要なら前の説明へ戻れます。全部が一画面に収まるという意味ではありません。

たとえば「点検と修理で、相談前に何を確かめるか比べたい」という用事なら、一方を隠すたびに前の条件を覚えておく負担が増えます。「修理の説明を読みたい」と決めて来た人なら、その内容を選んで読む形も考えられます。これは配置を選ぶための用事の例で、実利用者が理解できたという調査結果ではありません。

制作を頼むときは、「スマホ用のタブにしてください」より先に、訪問者に何を比べ、何を選び、どの説明から相談へ進んでほしいかを伝えます。名前を選ぶだけで用事を終えたことにはならないため、説明本文と次の行き先まで一緒に検討します。

三サービスを並べる案と「修理相談」を選ぶ案を、別の下書きとして読む

この二案は、同じ三つのサービス名を使った別の下書きです。縦に並べる案には三見出しの記録があり、切り替える案には「修理相談」と対応する説明欄の案があります。操作・理解・公開の結果は、どちらも確認できていません。

原寸画像を開く

図は別の用事に合わせた二つの案です。後者を前者の修正後や勝者とせず、ラベルを見たこと、対応する内容を読めたこと、相談先へ進めたことを別々に確かめます。390は説明用の幅で、全サイト共通の切り替え位置ではありません。

同じ原稿で、サービス名から説明と相談先までたどる

配置を比較するときは、片方だけ説明を省いて見やすくしないようにします。会社が確認した同じ原稿を使い、各サービス名を読んだ人が、必要な内容を確認して適切な相談先へ進めるかを追います。

名前だけで違いを決めさせない

「定期点検」「修理相談」「部品交換」という名前を並べるだけでは、利用者が自分の用事に合う説明を選べるか分かりません。運営担当は、各サービスで何を案内するか、相談の前に何を伝えてほしいか、どの窓口が受けるかを原稿で確かめます。未決の対象設備、対応地域、契約条件や費用を、見せ方を整える作業の中で付け足しません。

三つの違いを見比べる必要があるなら、説明を開いたまま並べ、見出しと本文を行き来できる案で試します。ページが長くなる場合は、見出しの区切りと、必要な場所へ戻る案内を整えます。長いからという理由だけで本文を隠すのではなく、比較に必要な情報が残るかを見ます。

一件を選ぶ案では、選択した名前と内容を合わせる

「修理相談」を選ぶ案では、選択中と伝える表示、実際に出ている説明、説明の後の相談先を順に読みます。名前だけ修理相談になり、本文や行き先が別サービスのままなら、その対応を直す必要があります。これは確認する観点であり、架空の二案でその不具合を見つけた記録ではありません。

ほかのサービス名が隠れて見つからないなら、切り替え候補の存在をどう知らせるかを制作担当と考えます。ラベルを小さく詰め込んだり、読めないところで切ったりして三つを収めること自体が目的ではありません。原票の二案目では、ほかのラベルの見え方は未確認です。表示済みや不具合と決める前に、実際の下書きで確かめます。

相談先は、名前やボタンがあることと、用事に合う内容へ進めることを分けます。架空原票の「通常相談先」は構成を説明する文字列で、実際のURLや受付条件はありません。実会社では、その説明の相談を受けられる既存の行き先と、開いた先の本文を確認してから接続します。

タブを使う場合は、移動中の位置・選択状態・内容の切り替えを分ける

タブに見える飾りだけでは、キーで使える部品とは限りません。採用するときは、制作担当が操作の仕組みと対応する内容を整え、実際の操作で確かめます。

W3C APGのタブのパターンでは、Tabキーで選択中のタブへ入り、次のTabでまとまりの外へ進みます。横並びの中の移動は左右の矢印キーです。手動で選択を確定する方式ではEnterまたはSpaceを使います。自動で切り替える方式もあるため、矢印移動がいつも内容の切り替えになるとは決めません。

縦並びでは上下の矢印に対応し、横並びの上下キーは通常のスクロールを妨げない作りを確かめます。自動切り替えは、内容の表示で待たされないことなど、適用条件も制作担当と確認します。

今キーで操作できる場所と、表示中の内容は別

APGのフォーカスと選択の説明でも、キーで今操作できる位置と、選択している項目を区別しています。手動方式なら、矢印で次の名前へ進んだ段階と、Enterなどでその内容を表示した段階を分けて読みます。

制作担当は、タブのまとまり・各タブ・対応する内容欄の役割とIDの参照関係、選択状態を伝えるaria-selectedと実際の表示を照合します。属性を書くだけで切り替え処理ができるわけではありません。APGは実装の設計参考で、全サイトにタブを要求したり、このページの全WCAG適合を証明したりする資料ではありません。

サービスで切り替え風の見た目を作る場合も、仕組みを確認します。Studioの公式説明は、箱とアンカーによる再現を、HTMLとして正しいタブ構造ではないと明記しています。その製品固有の見た目の手順を、キーで使えるタブの確認済み実装へ置き換えません。

スマホとキー操作で、同じ用事を内容から相談先まで試す

確認では、ページ・原稿・使う環境と訪問者の用事をそろえます。「点検と修理の違いを比べる」と「修理の説明を選ぶ」を別に試し、表示、操作、内容の理解、実際の受付を一つの成功にまとめません。

1. 比較する用事を、並べた案で追う。

   スマホで見出しを見つけ、同じ原稿の二つの説明を行き来して、必要な違いを読めるかを確かめます。相談先まで遠い場合も、見出しと本文の関係を保ったまま探せるかを見ます。単にページ全体の横はみ出しがないことだけで、比較できるとは判断しません。

2. 一件を選ぶ用事を、タブ候補で追う。

   初めの選択と表示内容を確認し、目的の名前を選んだ後に対応する本文が現れるかを読みます。スマホでは他の選択肢があることも分かるか、相談先へ進む前に選んだ内容を見失わないかを確かめます。長い名前や条件文は、会社の実原稿で試します。

3. キーによる移動と確定を別に試す。

   Tabでまとまりへ進み、制作担当と確認した方式に従って矢印、必要ならEnter・Spaceを使います。どの名前へ進んだか、選択状態がどうなったか、どの本文が出たかを別に残します。次のTabで本文内の必要な操作や相談先へ進めるかも確かめます。

4. 実際の行き先と、残る未確認を分ける。

   許可された確認先を開き、選んだサービスの相談に必要な本文があるかを読みます。ここまでの表示・遷移確認を、問い合わせの送信・受付・返答や、利用者が内容を理解した結果へ数えません。理解については、対象者に同じ用事を試してもらうなど、必要な確認を別に決めます。

スマホとPCの一般的な幅や切り替わる前後の調べ方は、同じページの幅と操作を比べる記事で説明しています。移動中の印や固定表示への重なりを調べるときは、フォーカス表示の確認方法を使います。折りたたみ質問の開閉は別部品なので、質問欄のEnter・Space確認とタブの矢印移動を混同しません。

確認できなければ、採用を保留して原稿へ戻る

比較するたびに説明を見失うなら、タブを使わず開いたまま並べる案を見直せます。どの名前から何を読めるのか決まらないなら、部品を増やす前に原稿と分類を整理します。選択状態やキー操作が合わない場合は、その部品を制作担当に確認してもらい、使える形を確かめるまで採用を保留します。

修正や公開の後は、同じ用事・原稿・条件で内容と行き先を再確認します。原票には修正後も公開後も結果がないため、二つ目の案を「改善済み」とはしません。この記事自体にも、動くタブや新しい問い合わせフォームは追加していません。

まとめ：比べる用事は開いて並べ、一件を選ぶ案は名前・内容・相談先で確かめる

サービス説明は、来訪者が何を比べ、何を選んで読みたいかから配置を決めます。複数を行き来するなら開いたまま並べる案を先に考え、一件を選ぶタブ案では、選択中の名前、実際の本文、次の相談先を同じ用事で照合します。

架空の二案では、縦に並ぶ三見出しと、「修理相談」を選んだ一つの内容欄を対比しました。後者の他ラベルの見え方とキー操作は未確認で、両案とも理解・公開・原因・修正後の結果はありません。比較用の下書きを、利用者が使えた実績や勝者の証拠へ変えないことが大切です。

サービス説明の配置と実際の相談先を整理したい場合は、対象の原稿、来訪者の用事、確認済み・未確認の範囲を分けてDREEXYへ相談できます。受付可否、支援範囲、費用は個別確認です。タブの採用や問い合わせ増加を約束するものではありません。