パソコンでホームページの文字を大きくしたら、修理の案内にある「持ち込みは予約制です」の後ろが見えなくなった。下にあった予約リンクも見つからないのに、別のサービスの案内は最後まで読める。こういうときは、まず同じ案内を通常表示に戻し、利用条件とリンクが元から掲載されているか確かめます。通常表示にだけあるなら、どの表示幅で、どの枠の中の何が欠けるかを控えましょう。
サービス名・説明・リンクを一つの四角い枠にまとめたものを、この記事ではカードと呼びます。カードを同じ高さにそろえたページでは、文字が折り返されて行数が増えると、下の行やリンクを置く余地が足りなくなることがあります。制作担当に伝えたいのは、行が欠ける位置、横に並ぶカードの数、別のカードやページにも同じことが起きるかです。ここでは、小さな修理店の架空サイトで、修正を頼む範囲と受け入れる条件まで決めてみます。
来店の判断に必要な一文を先に決める
架空の修理店には「持ち込み修理」「出張点検」「部品の受け取り」の三つの案内があり、パソコンでは横一列に並んでいます。相談は「持ち込み修理を頼みたくて画面を拡大したら、何を持って行けばよいか分からなかった」という想定です。担当者は営業時間を案内する前に、まず持ち込み修理のページで、お客様が何を決めようとしていたかを整理しました。今回は、予約が必要か、何を持参するか、どこから予約案内に進むかの三つです。
社内の受付案内と公開ページを開くと、通常表示には「持ち込みは予約制です。製品本体と、型番が分かるものをお持ちください。」とあり、その下に「持ち込み修理の予約案内」があります。カードの冒頭には、持ち込み修理で確認する内容の説明が二段落あります。「予約制」という言葉だけ残り、持参するものが消える場合も、来店の判断は途中で止まります。文章の一字一句を暗記する必要はありません。予約制、必要な持参物、リンクの行き先の三点を、確認時に読める形で書き出します。
「部品の受け取り」には「受け取り番号をお知らせください」という短い一文と、受け取り案内へのリンクがあるとします。短いカードも同じ条件で並べて見れば、サイト全体で文字が欠けたのか、行数の多いカードで先に起きたのかを比べられます。見比べるために別の業務を試す必要はありません。二つのカードを同じ一枚の画面で見て、短いカードでは条件とリンクが残ったかを控えます。
通常表示の時点で持参物が載っていなければ、受付内容を確認して掲載する仕事が先です。通常表示でリンクの文字が見えていても、押して別の案内へ着くなら、そのURLの設定も別に確認します。掲載内容やリンク自体に元からある問題を記録しておくと、見た目の変更を加えた後に、どの仕事が残っているかを区別できます。
同じウィンドウで、何列のときにどこが切れたかを見る
公開ページのURLを、シークレットウィンドウなど、管理画面にログインしていない状態で開きます。管理用の帯が出ないことも確認します。最初はデスクトップのブラウザを100％にして、横に並ぶカードの数と、見出しからリンクまでを確認します。例えばChromeでは右上のメニューにあるズームで表示倍率を変えられます。ブラウザの表示倍率と、パソコン全体の画面設定にある拡大率は別々に記録します。操作を確かめたい場合は、Google Chromeのページ拡大の案内を参照できます。
ウィンドウの幅はそのままにして、途中の倍率も見ながら200％まで上げます。例えば125％、150％、175％、200％の順です。ブラウザが用意している段階を使い、倍率が変わるごとに「横にいくつ並んだか」と「条件の最後とリンクが見えたか」を記録します。画面に収まる量が減るので、ページ全体は下へ動かして構いません。下へ動かしてカードの底まで来たとき、枠の内側に必要な行とリンクがあるかを見ます。画面の外に続く行と、カードの縁で消えて続きが読めない行は、手直しする場所が違います。
例えば150％で三列から二列になっても条件が読めて、175％で二列のまま持参物の行が欠けることがあります。反対に200％で一列になった結果、175％より読みやすくなる場合もあります。200％の結果だけを残すと、途中の倍率で二列になっていたときの欠落を伝えられません。相談のあった倍率が200％未満なら、その倍率を優先して記録しましょう。選べない倍率で連絡が来た場合は、前後の段階を試し、試した数値とお客様から聞いた数値を分けます。
この修理店では、150％で二列に切り替わり、175％に上げると、「製品本体と」まで見えるものの、残りの行とリンクはカードの底の線で消えたとします。200％でも二列のままで、持参条件が一行分さらに隠れました。同じ並びにあった短い「部品の受け取り」の案内は、条件もリンクも見えます。比較に使ったカードの名前まで記録すると、制作担当が開いた画面で、同じ長さの文章を見比べられます。
マウスでリンクが見えるかは、キーボードで移動する前に確認します。画面から隠れていたリンクへTabキーで選択位置が移り、ブラウザが枠の中を自動で動かして、そのときだけリンクが見える場合があるためです。逆に、Tabキーで順に移動すると、選択位置が見えないまま次のリンクへ飛んだように感じることもあります。マウスで普通に探した結果、Tabキーで移動した後の結果、リンクを開いて着いた先を別々に書くと、同じ「押せない」でも状況が伝わります。
幅を狭くした100％表示でも起きるか確かめる
倍率を上げると文字が大きく見え、同じウィンドウの中に横並びのカードを置ける余裕も変わります。この二つが一緒に起きるため、「200％で切れた」という記録からだけでは原因を選べません。次に100％へ戻してウィンドウを少しずつ狭め、二列で持ち込み修理のカードが同じくらい細く見える場所を探します。制作担当が画面の表示幅を測れるなら数値を添えます。担当者の手元では、列数と折り返し方が近い状態を再現できれば十分です。
狭い100％でも同じ文末がカードの底で消えた場合は、折り返しで必要な行が増えたときに枠が伸びるかを先に調べてもらいます。横に二つ並べる設定や左右の余白も調べる候補です。一列へ切り替えたところで同じ文末が戻った場合は、カード自体が横へ広がって行数が減った可能性があります。一列で直ったと判断する前に、さらに狭くして、同じカードがまた切れないか見ます。
狭い100％では読めるのに拡大時にだけ欠けることもあります。文字やボタンの大きさが切り替わる箇所、カードの底に重ねて置いたリンク、カードの外側を囲む枠など、制作側に見てもらう材料は残ります。Firefoxには文字だけを拡大する設定もあり、使える場合はページ全体を拡大したときと結果を分けて記録できます。比較のときは一つの設定を変えるたびに元に戻します。ページ拡大と文字だけの拡大を一度に掛けると、担当者がどの条件で同じ画面を出せばよいか分からなくなります。MozillaのFirefoxアクセシビリティ機能の案内に両方の方法があります。
見え方を記録するときは、下の四つのうち、何に当てはまるかも見ておくと依頼の範囲を絞れます。複数に見えるときは、原因の名前を決める必要はありません。例えば「見出しは同じ、本文は枠の中の途中まで、枠の外の次のカードは普通に見える」と伝えるだけでも、制作担当が確認する箇所を選べます。
- 下の縁で行が途中まで見える。 カードや中の説明欄に高さの上限があり、はみ出した部分を隠しているかを確認します。リンクまで一緒に消えるなら、説明欄だけでなくカード全体やさらに外側の枠も候補です。
- 行末が「…」で終わり、リンクは見える。 説明欄を数行で止める設定や、短い紹介文を出す仕組みを確認します。短い紹介用の文章に切り替わっているなら、必要な受付条件がどこで読めるべきかを事業者と制作担当で決めます。
- 文字は残るが、リンクや次の枠に重なる。 文字が隠れずに枠の外へ出ている場合です。説明欄とリンクを上下に並べて置けるか、下のカードと重ならないかも確認に含めます。
- カードが一つ丸ごと消える、または別の文章になる。 狭い表示だけ別の案内を出していないか確認します。通常表示のカードの高さを直しても、別の案内が表示される条件には届かない場合があります。
ブラウザ内のページ検索で欠けた文言が見つかることもあります。制作担当が元の文章を調べる手掛かりにはなりますが、お客様に見える場所へ出たかは、実際の画面で読み直して確かめます。ページ検索の結果と、カードの縁で見えた文字を両方残すと、同じ文字が別の場所に載っていた場合にも取り違えを減らせます。
高さと列数は別々に試してもらう
制作担当へ渡すときは、普段のURL、倍率、何列か、消えた文とリンク、短い比較用カードの結果を一緒に送ります。スクリーンショットを添える場合は、同じ対象を100％と問題の倍率で一枚ずつ撮り、どちらにも見出しと枠の下端が入るようにします。倍率が画像に出ない場合は文面で補い、別のタブや通知、個人情報が写った部分は共有前に除きます。スクリーンショットに写せなかった「本来ある行」は文字で渡します。
修理店の記入例です。「サービス一覧の持ち込み修理。Chromeで同じウィンドウを100％にすると、三列で持参条件と予約案内が見えます。175％で二列にすると、持参条件が『製品本体と』で切れ、リンクが見えません。100％のままウィンドウを縮め、同じ二列にしたときもカードの底で切れます。部品の受け取りの短いカードは、どの条件でも最後まで見えます。持ち込み修理の条件と予約案内が、どの列数でもカードの中で読めて開けるようにしてください。」制作担当が別のブラウザで試す場合は、最初に報告と同じ条件で再現できたかを返してもらいます。
修正の第一候補は、カード内の文章が増えたらカードの高さも伸びるようにすることです。条件とリンクを本文の下へ順に配置し、リンクを枠の底の決まった位置に固定している場合は、条件の行数が増えてもリンクの位置が下がるかを確認してもらいます。見た目をそろえたい場合は、十分な幅があるときに行の中で一番長いカードの高さにそろえる設計も相談できます。文末を隠す上限を全カードに置いたままだと、文章が増えるたびに同じ箇所を直すことになります。
例えば検証用ページで、まず今の二列を保ち、カードや説明欄が内容に合わせて伸びる状態だけを試します。そこで持参条件とリンクが戻り、文字も読めるなら、高さの見直しが直接効いたと判断しやすくなります。全文が戻っても二列の一行が短すぎて、「製品」「本体」「と」と細切れに読まなければならない場合は、その幅では一列にする試案も見ます。列数だけを変えて今の文章が入った場合も、次の更新で長くなった文章が入るかは別に確かめます。高さと列数を一度に変更した完成画面だけを見るより、どの条件を直す必要があったかを記録に残せます。
色付きのカードと影を残しながら、狭い画面ではサービス名・条件・リンクの順で縦に並ぶ案もあります。利用条件を短く整えるなら、「持ち込みは予約制」「持参物は製品本体と型番が分かるもの」のように、受付で必要な意味を先に残します。長い説明を詳細ページへ移す場合は、何をカードに残し、どこから詳細へ進むかを事業者が決めます。見た目を戻すために文字を小さくするだけでは、文字を大きくして読もうとしたお客様に同じ作業を求めることになります。
カードが他のページと共通の部品になっている場合は、変更した部品を使うページを制作担当に一、二件挙げてもらいます。例えばトップページにも同じ持ち込み修理カードがあるなら、そこでだけ使っている紹介文やリンクの種類が違うことがあります。どこまで直るかは共通部分とページ個別の設定次第です。今回のURL以外も無条件に修正したと考えず、同じ種類の枠で一番条件が長いページを次の確認対象にします。
直ったかどうかは、三つの答えと操作で決める
修正を受け入れるときは、まず報告と同じURL・ブラウザ・ウィンドウ幅で、100％、問題が出た175％、200％の順に見ます。途中で三列から二列、二列から一列に変わるなら、切り替わる直前と直後でも条件を読み直します。「何列ならきれいに見えるか」より、「来店前に予約は必要か」「何を持って行くか」「どのリンクから予約案内へ行けるか」の三つに答えられることを先に確認します。ページを下へ動かせば全部見える状態なら、カードが画面の高さを超えていても、そのことだけで欠落と判断する必要はありません。
次に、マウスで見つけたリンクを開き、予約の案内に着くことを確認します。新たにページを開き直してから、Tabキーでリンクへ移動し、選択中の目印とリンク名が見えるか、Enterキーで同じ案内へ着くかを確かめます。ここでは予約の送信や成立までは試さなくても、リンクが画面に表示され、狙った案内に着くことを確認できます。短い「部品の受け取り」の案内でも受け取り番号の条件とそのリンクが読めれば、長いカードを直す際に短いカードの動作まで壊していないと判断する材料になります。
文章を次に更新するときの確認は、制作担当と確認用ページで行えます。例えば「製品本体と、型番が分かるものをお持ちください。」に続けて「電源が入る製品は、ふだん使っている電源コードもお持ちください。」という架空の一文を足した版を作り、枠が伸びてその下のリンクまで残るかを試します。受付が決めていない条件を本番へ載せる必要はありません。確認用の文章を元に戻したことも見てから、公開用の文面を確認します。将来あり得る一文を試せば、今回の文章だけが偶然収まる修正と、更新後も使いやすい修正を見分けられます。
狭い画面での表示も別に確かめます。文字を200％まで拡大しても情報と操作が失われないようにする考え方は、W3CのWCAG 2.2の「文字サイズの変更」にあります。横書きで縦に読む一般的なページを、幅320 CSSピクセル相当でも、情報や機能を失わず、縦横の両方へ動かさずに読めるようにする考え方は、別の「リフロー」にあります。CSSピクセルは制作側が画面幅を扱うときの単位です。制作担当には320 CSSピクセル相当での確認を別に頼めます。例えば表示領域の幅が1280 CSSピクセルなら、200％では幅320相当になりません。W3C「文字サイズの変更」とW3C「リフロー」に考え方と例があります。
このカードの確認で残す結果は、例えば「元の二列では条件の末尾とリンクが欠けた。修正後は同じ倍率で全文とリンクを確認。狭い幅では一列へ変わり、ページを下へ動かして読めた。確認用の長い文でも同じ結果。スマートフォン実機は次回確認」という形です。どこまで試したかを明記すれば、実機や別のブラウザを調べる人も、次に試す条件を選べます。サイト全体のアクセシビリティ適合を確認する場合は、対象ページと評価方法を別に決めます。
島田市周辺で、受付条件が違うサービスを同じページに載せ、公開後も自社で更新したいときは、どの条件とリンクを各カードに残すかを制作の時点で決めておくと確認がしやすくなります。更新する人と修正後の画面まで相談したい方は、LIFESEEDSのホームページ制作・運用の案内をご覧ください。すでに起きている場合は、対象のURL、見えなかった一文、試した表示倍率を添えてお問い合わせください。
コメント