このワイヤーの特徴
違いのある行が、読み飛ばさずに見つかる
項目が多い比較表では、同じ内容が続く行に埋もれて、判断に関わる違いを見落としがちです。違いのある行の背景を変え、項目名に「違いあり」の印を付けて、違いのある行が目に入るようにしています。
違いのある行だけに、絞って見比べられる
違いを見つけても、行が離れていると見比べにくくなります。ボタン1つで違いのない行を隠し、違いのある行だけを続けて並べられるようにしています。
絞り込んでいることが、文字と読み上げで分かる
行が減ったことに気づかないと、読み手は項目が欠けていると誤解します。ボタンの押している状態を aria-pressed で示し、件数の文とボタン名を切り替えて、読み上げでも知らせています。
最初は、すべての項目を表示する
最初から絞り込んでいると、同じ内容の項目を確かめたい読み手が困ります。既定はすべての項目を表示し、読み手が選んだときだけ絞り込む形にしています。
制作時のよくある失敗
違いを色だけで示す
背景色だけでは、色の見分けにくい人や、画面の設定によっては違いが分かりません。
「違いあり」の文字の印を添えます。
絞り込んだあと、戻し方が分からない
ボタン名が変わらないと、もう一度押せば戻ることが伝わりません。
押したあとはボタン名を「すべての項目を表示」に変えます。
表記ゆれで、違いの判定が狂う
同じ意味でも「あり」と「対応」のように書き方が違うと、違いのある行として判定されます。
判定の前に、表記をそろえます。
最初から、違いのある行だけを表示する
同じ内容の項目も判断材料になります。
最初はすべて表示し、絞り込みは読み手が選べるようにします。
よくある質問
違いがあるかどうかは、どう判定すればよいですか?
同じ行の値がすべて同じなら「違いなし」、1つでも違えば「違いあり」とするのが分かりやすいと考えられます。
判定の前に、単位や言葉の書き方をそろえておきます。
比べる対象を、読み手が選べるようにしたほうがよいですか?
対象が5つ以上ある場合は、読み手に2〜4つを選んでもらい、その中で違いを示す方法があります。
選んだ対象が変わるたびに、違いの判定もやり直します。
違いのある行を、上にまとめて並べ替えてもよいですか?
項目の順番には意味があることが多いため、並び順は変えずに印を付け、絞り込みで見比べてもらうほうが、元の表との対応が崩れにくいと考えられます。
