大きな画面なら、三つのプランを横に並べられます。しかしスマートフォンでは、数字が小さくなりすぎたり、横に動かすうちに列の名前が見えなくなったりします。問題は幅だけではありません。読む人が「何を比較しているか」を覚え続けなければならないことも負担です。文字を小さくする前に、どの違いを見つけてもらうのかを決めましょう。
まず比較の目的を決める
三つの講座を比較する場面を考えてみます。選択に必要なのは、受講形式、期間、前提となる知識かもしれません。各講座の宣伝文は、表の外に置く方が整理しやすくなります。一つのセルに条件、例外、講師の経歴まで入れると、簡潔な比較項目ではなくなります。事実と説明を分けつつ、申込みの判断を変える制約は隠さないことが大切です。
見出しと値の関係を保つ
W3Cは、表の見出しとデータのセルを適切なHTML要素で示すことを推奨しています。複雑な関係には、追加の属性が必要になる場合もあります。最初の行を太字にするだけでは、その構造を支援技術に伝えられません。表には内容が分かる名前を付け、単位を明記し、不明な値の表し方を統一しましょう。空欄が説明なしに「無料」や「含まれない」を意味してはいけません。
横スクロールかカードかを選ぶ
複数の選択肢について同じ項目を見比べるなら、縦に長いカード一覧より、表を保って横スクロールできる方が適している場合があります。動かせる範囲だと分かる表示にし、タッチ操作以外でも利用できるか確かめます。一方、一つずつのプランを読む使い方が中心なら、カードの方が読みやすいこともあります。カードには値だけでなく、項目名も毎回載せます。これは情報に応じた編集上の判断であり、すべての表に共通する正解ではありません。
ページ全体を横に動かさない
W3CのReflowの解説では、理解のために二次元の配置を必要とする情報に例外を認めています。ただし、ページ全体を横スクロールさせてよいという意味ではありません。表の前の文章、ボタン、後続のセクションは、狭い画面でも読みやすく保つ必要があります。表の中でも長い説明は折り返し、読めないほど小さな文字にしないようにします。
見た目だけでなく選びやすさを確かめる
狭い画面で二つのプランの具体的な違いを探してみてください。その後、表示を拡大し、操作できる要素をキーボードで移動し、支援技術による見出しの読み上げも確認します。スクロール後も、その数字がどのプランのものか分かるでしょうか。パソコン版とスマートフォン版で事実は一致しているでしょうか。何画面分も記憶しなければ答えが出ないなら、構造を簡潔にしましょう。よい比較は、場所だけでなく読む人の労力も節約します。