サービス一覧に「詳しくはこちら」が三つ並ぶと、ボタンの文字を見比べても、どれを押せばよいか判断できません。店舗のエアコンが急に止まった人なら、故障時の対応を知りたいところです。定期点検の案内を開いてから引き返す手間を減らすには、選ぶ前に「空調修理」「空調の定期点検」の違いが分かるよう、リンクの文字に行き先を入れます。
直すときは、先にそれぞれのリンクを開いて、着いたページの見出しと、そこで分かることを控えます。故障時の案内が載ったページなら「店舗の空調修理の案内」と書けます。開くのが修理の対応条件だけを説明するページなら、「店舗の空調修理の対応条件」の方が、開いた後の内容を想像しやすくなります。文言を決める作業と、設定されたリンク先を確かめる作業は、同じ紙の別々の欄で進めると迷いません。
サービスの名前が見えていても、リンクだけでは選べないことがある
横に三枚並ぶカードでは、見出しとボタンが一度に見え、各ボタンの意味を推測できることがあります。同じ一覧をスマートフォンの縦長の画面で開くと、説明が長いカードでは、見出しが画面の上へ隠れ、ボタンだけが見えていることがあります。文字を大きくした状態や、少しだけスクロールしてボタンを探す場面でも起こりえます。店の人にはカードの順番が分かっていても、初めて開く人にとって、上から何番目かは行き先を知る手掛かりになりません。
ページの内容を音声や点字で確認するためのスクリーンリーダーには、ページからリンクを取り出して一覧にする機能があるものもあります。そこでは、リンクの上にあるサービス名が一覧にそのまま付いてくるとは限りません。WordPressの公開フォーラムにも、投稿一覧で「続きを読む」に記事名が補われず、読み上げでどの記事へ向かうか区別しにくいと相談した人がいました。この相談は投稿カードの例です。サービス一覧でも、リンクの近くに名前がある状態と、リンク自体に目的が伝わる名前がある状態の違いを考える手掛かりになります。WordPress.orgの公開サポートでの相談
ウェブの使いやすさに関するW3CのWCAG 2.2では、達成基準2.4.4で、リンクの文字だけ、または支援技術がリンクとの関係を取得できる文脈と合わせて目的が分かることを扱います。例えば同じ文や段落の説明は、構造によっては手掛かりになります。見た目でカード内の文字が近いことだけを根拠に、その関係を支援技術でもたどれるとは判断できません。リンクの文字だけで目的を識別するための仕組みを扱う2.4.9は、別の達成基準です。この記事では、サイトを部分的に確認するために、サービス一覧のリンク名だけを見聞きしても選べる状態を目標にします。WCAG 2.2の文脈内でのリンク目的の解説、リンクだけで目的を識別する達成基準の解説
先に行き先を開き、そこで分かることを一行にする
サービスをすでに載せているなら、公開中の一覧ページのURLを一つ控えます。複数のページに同じ一覧があるときは、まずお客様に案内している入口を一つ選びます。編集画面を見慣れている担当者でも、確認は閲覧者の画面から始めます。ログインしていない状態で対象の一覧を開き、上から順番に、カードの見出し、実際に押せる文字、押してから落ち着いた時点のURL、着いたページの主見出しを控えます。リンクが開くことと、用件が合っていることを両方確かめます。
たとえば以下は、店舗向けの設備会社を想定した架空の記入例です。公開中のサイトを調査した結果ではありません。一覧に「修理」「点検」「入替」のカードが並び、押せる文字はどれも「詳しくはこちら」でした。各詳細ページにどこまで情報が載っているかを開いて確認し、右端に新しい案を入れます。短いURLは控え方を示す例で、実際には一覧と到着先の完全なURLを残しておくと、制作担当にそのまま渡せます。
| カード | 現在の着地と主見出し | 到着して分かること | 変更するリンクの文字 |
|---|---|---|---|
| 修理 | /service/repair/「店舗の空調修理」 |
修理の対応条件と、相談に必要な情報 | 店舗の空調修理の案内 |
| 点検 | /service/check/「店舗の空調の定期点検」 |
定期点検の対象と作業範囲 | 店舗の空調の定期点検 |
| 入替 | /service/replace/「店舗の空調入替工事」 |
入替工事の相談から現地確認までの流れ | 店舗の空調入替工事の流れ |
そのページに予約機能がなければ、リンクの文字を「空調修理を予約する」に変えると、案内を読みたい人にも予約したい人にも、次の画面を違って伝えます。「当日修理を依頼する」と書くには、当日対応の条件と受付の仕組みも確かめる必要があります。案内ページにあるのが対象機器と相談に必要な情報なら、「店舗の空調修理の案内」で十分です。逆に、二つのリンクが同じ空調修理のページを開き、同じ用事で使うなら、ページごとに表現をひねるより「店舗の空調修理の案内」にそろえる方が、同じ案内を見つけやすくなります。
着地を控えていると、文言を変えるだけでは終わらない行が見つかります。例えば、点検のカードが押すと修理ページに着く場合は、予定している点検ページが公開されているか確認して、点検カードの行き先も修正対象に入れます。予定しているページがなく、今は共通ページに点検と修理を載せている場合は、共通ページの中で点検の説明を見つけられるか確認します。点検の箇所へ直接案内できる設計なら、そこに着くことを条件に「空調の定期点検の内容」と書けます。共通ページの冒頭しか開けず、そこから二つの内容を選ぶ設計なら、「空調の修理・点検の案内」と書き、二つのカードに同じリンクが必要か考えます。行き先が決められない行は「保留」とし、公開する案内の内容が決まってから名前を付けます。
見出しをリンクにするか、説明の後にリンクを残すか
カードに見出し、短い説明、リンクがあるときは、どこで訪問者に選んでもらいたいかを決めます。見出しの「店舗の空調の定期点検」だけで選べるなら、見出しをリンクにする案があります。見出しが押せることが見て分かり、リンクを選択した位置も分かるよう、見た目は制作担当と合わせます。見出しの下に同じページへ向かう「詳しくはこちら」がある場合は、削っても問題ないか、押せる範囲と見つけやすさを確認してから決めます。たとえばスマートフォンではカード下端のリンクを目印にしていた場合、見出しに一本化すると、説明の末尾から次へ進む場所が遠くなることがあります。
説明を一読してから選んでほしいなら、見出しをそのままにして、カード下端のリンクを「店舗の空調の定期点検」に変える案があります。カード見出しが「点検」、説明に具体的な対象や作業があり、その後に「店舗の空調の定期点検」と書けば、リンクの文字だけを切り出しても意味が通ります。修理ページと同じ並びにあっても、「店舗の空調」までが共通で、その先の「修理」「定期点検」で区別できます。狭い画面で末尾が省略されるなら、区別に必要な語が先に見える「空調の定期点検」なども候補です。短くした結果、住宅向けと店舗向けの点検が混ざる一覧なら、対象を示す「店舗」を残し、ボタンを折り返せるよう相談します。
リンクが一つのカードに二本必要なこともあります。「店舗の空調修理の案内」と「空調修理の相談フォーム」が別の画面を開く場合、説明を読みたい人と、すでに相談する内容が決まっている人の両方に使い道があります。二本を置く場合は、同じ「修理はこちら」でまとめず、選択肢を文字で区別できるようにします。見出しとカード下端が同じ案内ページに行く場合は、実際にタブキーで進んで、同じ用事のリンクで二回止まることに役割があるかを見ます。カード全体を押せるようにする設計と、カード内に別の相談リンクを追加する設計を組み合わせる場合は、押せる範囲が重ならず、それぞれ独立して操作できるかを制作担当に確認してもらいます。
WordPressなどの管理画面でカードごとにリンクの文字と行き先を入力できるなら、複製や一括置換をする前に一件だけ下書きや確認用画面で試すと、表示上の制約が分かります。文字欄が全カードで共通なら、その欄を「店舗の空調修理の案内」に変えると他のカードにまで同じ文字が出る可能性があります。この場合は、カード別に入力できるようにするか、もとのサービス名をリンクの表示に使うかを制作担当と決めます。自動でサービス名を入れる場合でも、二つのカードのサービス名が同じなら区別できないので、「店舗向け」「住宅向け」など、利用者が違いを判断する語を元データで見直します。次にカードを追加したときも同じ入力で整うよう、管理画面のどの欄を使うかを引継ぎに残します。
スマートフォンの画面、キーボード、読み上げを別々に確かめる
文字を読んで選び、着いたページで答え合わせする
まずスマートフォンで一覧を開き、縦にスクロールして、対象カードの見出しが画面から外れた位置でいったん止めます。「店舗の空調が止まったときに読む案内を一つ選ぶ」と決め、画面に見えるリンクの文字を読んで選びます。次に「故障はしていない。定期点検の対象を知りたい」という用件で、点検の案内を選びます。二つとも「空調の案内」のように見える場合、リンクを実際に押す前にどの言葉が足りないかが分かります。選んだ後はページの主見出しとURLを控え、想定した用件の情報が掲載されているかを見ます。URLが似ているという理由だけで合格にせず、点検の案内のはずが修理の説明に変わっていたら、その違いを記録します。
文字が長くなったときは、縦向きで「定期点検」のような区別に必要な語まで読めるかを見ます。二行に収まっていても二行目を押すと反応しない、上下のカードの押せる範囲が近くて隣を開く、画面幅を狭くすると最後の語が消えるといった症状は、文案に印を付けて制作担当へ伝えます。通常の文字設定で一度確認した後、普段の設定で文字を大きくしている端末でも確かめます。用意できる端末が一台なら機種、ブラウザー、縦横、文字設定を控え、その条件で確認したと記します。スクリーンショットだけでは実際のタップでどこが開くかは確認できないので、少なくとも隣接する二件を操作します。
タブキーで移動して、表示と到着を記録する
パソコンではマウスを使わず、一覧の前からタブキーで順に移動します。いま選ばれている箇所に枠などが出るか、カードの見出しやリンクのどちらで止まるかを見ます。リンクが選ばれた位置でエンターキーを押し、着いたページを確かめます。同じ方法で隣のカードへ進みます。マウスで押す範囲が広いことと、キーボードで実際のリンクにたどり着けることは、それぞれ確認します。表示文が直ったのにタブキーで止まらない場合は、文章をまた書き直す前に、公開画面のURLと止まらなかった操作を制作担当へ渡します。
タブキーを使う確認では、文字の見え方、選択位置、キーボードで開けることが分かります。読み上げに渡る名前を確認するには、別の操作が必要です。確認を頼むときは「キーボードで使えた」だけで終わらず、「修理・点検それぞれで枠が出た」「選択位置でエンターキーを押すと対応する詳細が開いた」と書きます。対応機能の有無や環境設定で挙動が違う場合があるため、ブラウザーとOSを併記すると、制作担当が同じ条件を用意しやすくなります。
リンクとして伝わる名前を確かめる
スクリーンリーダーを使える人がいる場合は、一覧から修理と点検のリンクを探し、どんな名前で出たかを確認します。リンクだけを取り出す一覧を使うと、前後の説明を読んで推測する確認と区別できます。使うソフトやブラウザーによって操作方法は異なります。例えばWindowsのNVDAを使う場合は、ブラウザーでページを読んでいるとき、閲覧モードでNVDAキーとF7を押して要素リストを開き、種類をリンクに切り替えます。NVDAキーの割り当てやリスト内の操作は公式ガイドを参照できます。名前の読み上げだけで記録を終えず、一覧から該当リンクを選んで実際に開き、期待した到着先か確認します。NVDAの公式ユーザーガイド
利用できるスクリーンリーダーがないときは、制作担当にブラウザーの開発者ツールでリンクに付いた「アクセシブルな名前」を確認してもらいます。これは支援技術へ渡される名前を確かめる工程です。例えば画面には「店舗の空調修理の案内」と出ているのに、名前が古い「詳しくはこちら」のままなら、見える文字とは別の設定が残っている可能性があります。表示と名前が一致するよう修正を依頼し、結果を「ブラウザーで名前を確認。実際の読み上げは未確認」と残します。名前の確認を実際に行っていない場合は、その欄も未確認です。Chrome開発者ツールでアクセシビリティを確認する公式資料
テンプレートの都合で表示が「詳しくはこちら」のままになる場合、制作担当がリンクに読み上げ向けの名前を設定する方法もあります。たとえば見える文字を含む「詳しくはこちら：店舗の空調修理」といった名前で目的を補います。画面に見える文字が名前に含まれていると、音声で画面を操作する人が表示を手掛かりにしやすくなります。読み上げ向けの設定だけを変えた場合、画面上でボタンの文字を見比べる人には同じ表示が残ります。そのため今回の例では「スマートフォンで表示を読み分けられるか」の欄は未達とし、文字を表示できるようにする変更を別途検討します。WCAG 2.2の表示ラベルと名前の解説、デジタル庁のリンクテキストの指針
修正の依頼には、名前と行き先の両方を渡す
制作担当に伝えるときは、「こちらを全部変えてください」だけでは、同じ行き先を示す二つのリンクまで別の言葉に変わったり、古い行き先が残ったりします。対象の一覧、カードの見出し、現状の表示、変更後の表示、期待するURL、到着時の主見出しを一行にします。例の点検カードなら、「一覧の『点検』カード。『詳しくはこちら』を『店舗の空調の定期点検』へ。開くのは点検ページ、主見出しは『店舗の空調の定期点検』。スマートフォンで文字を読み切れ、隣の修理カードは修理ページを開くことも確認」と書けます。サイト内の別ページにも同じカードを置いている場合は、そこで同じ修正を反映するのか、個別の説明が必要なのかも書き添えます。
修正後に例の点検カードで「スマートフォンの表示は点検と読めるが、押すと修理のページへ着く」という結果なら、表示は合格、行き先は修正待ちです。点検に着いたものの、読み上げの一覧で「詳しくはこちら」が続くなら、表示と着地を合格として、支援技術へ渡る名前を確認し直します。点検だけ直ったと見えても、隣の修理と入替でリンクの文字や行き先が変わっていないか確認します。共通テンプレートを触った場合は別のページでも同じ種類のカードを一組選び、関係するリンクを試します。確認の結果は端末・操作・実際の文字・実際の着地を含めて残すと、誰が再確認しても同じ条件をたどれます。
一覧に新しいサービスを足すたびに、公開前に「このリンクの言葉を一行だけ読んでどこへ行くか分かるか」「開いた画面はその言葉どおりか」を隣のカードと一緒に見ます。元のサービス名を変えたときは、一覧の見出しとリンク名、着いたページの主見出しに古い名前が残っていないかも確かめます。各カードの名前と行き先の組を手元に残しておけば、追加したカードだけが別のページを開いたり、前に直した文言へ戻ったりしたときに、最後に確認した状態と比べられます。
島田市周辺でホームページを制作・見直しする際に、サービスの違いが一覧から伝わる構成を考えたい方は、LIFESEEDSのホームページ制作・運用の案内をご覧ください。すでに公開中の一覧なら、見直したいページと、迷いやすいカードを二つほど添えてお問い合わせいただくと、現状を共有しやすくなります。
コメント