このワイヤーの特徴
最初は名前と期間だけで、全体の順番が分かる
すべての説明を最初から並べると、全体の順番が見えにくくなります。最初は段階の名前と期間だけを並べ、読みたい段階だけを開けるようにしています。
開いた中の項目を、そろえる
段階ごとに書く項目が違うと、見比べられません。開いた中は、「やること」「お渡しするもの」「お願いすること」の3項目を同じ順番で並べています。
開閉の状態が、読み上げにも伝わる
矢印の向きだけでは、開いているかどうかが目で見ない人に伝わりません。ボタンに aria-expanded を付け、開く部分を aria-controls で指定しています。
一度に1つだけ開き、ページが伸びすぎない
複数を同時に開くと、比べにくく、ページも長くなります。1つを開くと、ほかは閉じるようにしています。
SPでも、同じ形で開ける
SPで形を変えると、PCで見た人が迷います。SPでも同じ開閉にし、期間を名前の下に移して、押せる範囲を横いっぱいにしています。
制作時のよくある失敗
開かないと、段階の内容がまったく分からない
段階の名前だけでは、何が起きるのか想像できないことがあります。
名前を「ヒアリング・お見積り」のように、内容が分かる言葉にします。
開閉できることが、見つけにくい
矢印が小さいだけでは、押せることに気づかれません。
段階の行全体をボタンにし、矢印を添えて、押せる範囲を広く取ります。
ボタンの名前が「詳しく見る」だけ
同じ名前のボタンが並ぶと、読み上げでは違いが分かりません。
段階の名前をそのままボタンの名前にします。
見出しの階層が、ページと合っていない
各段階を見出し要素の中のボタンにする場合、階層はページ全体の文書構造に合わせて決めます。
合わないまま h2 を並べると、目次や読み上げで章が混ざります。
開閉を、ページを開いた時点で全部閉じている
何も開いていないと、詳しい内容の見本が伝わりません。
最初の段階は開いておくと、開閉できることと、開いた中身の形が同時に伝わります。
よくある質問
複数の段階を、同時に開けるようにしてもよいですか?
構いませんが、比べにくくなり、ページも長くなりやすくなります。
一度に1つだけ開くと、扱いやすいと考えられます。
全部を読みたい人が多いなら、開閉にせず縦タイムライン型が向きます。
開閉のボタンには、何を付ければよいですか?
開いているかどうかを示す aria-expanded と、開く部分を指定する aria-controls を付けます。
ボタンの名前は、段階の名前そのものにします。
開いた中に書く項目は、何がよいですか?
「やること」「お渡しするもの」「お願いすること」の3つが基本です。
段階によって項目が変わらないよう、すべての段階でそろえます。
details 要素を使ってもよいですか?
使えますが、サイトのほかの部分のスタイルが影響することがあります。
使う場合は、見た目や開閉の動きを確かめます。
button と aria-expanded で組む方法も、動きを細かく決めやすい選択肢です。
