デザイニングWebアクセシビリティ
リンク先がわからないサイトを改善する3つの解決アプローチ

内容がわからないリンクテキストはユーザーに負担をかけるため、具体的で重複しないリンクテキストにしましょう
このコーナーでは、書籍『デザイニングWebアクセシビリティ』の一部を特別公開しています。筆者陣によるオンライン講座「アクセシビリティ入門(全7回)」放送中。

ユーザーはページを斜め読みする中でリンクテキストを拾い読みします。内容がわからないリンクテキストはユーザーに負担をかけるため、具体的で重複しないリンクテキストにしましょう。

この記事では、第7章「コンテンツ設計」から、リンク先がわからないサイトの改善ポイント、7-6「リンク先がわからない」の内容をお届けします。

不適切なリンクテキストではリンク先がわからない

ユーザーは、リンク先を見るためにリンクをたどります。リンクテキストがなかったり、不適切だったりすると、リンク先が何なのかわからず、ユーザーはそのリンクをたどってよいのか判断できなくなってしまいます。

ラベルがないリンク

リンクにラベルがつけられていないと、リンク先が何なのかわかりません。画像の一部をクリック可能にしている場合、押せそうな見え方になっていればリンクであることはわかりますが、ラベルが併記されていなければリンク先を想像することは難しいでしょう。

図
グラフィックの中に押せる要素があるが、ラベルがつけられていない例。ユーザーはこれを見てもリンク先がわからない。

URLを単独でリンクにしている場合にも同じ問題が起きます。URLの文字の羅列からは、リンク先が何なのかはわかりません。ユーザーにとって既知のURLであったり、URLのドメインからリンク先を推測できる場合などもありますが、そうでない場合が多いでしょう。

「こちら」リンク

リンクにラベルがつけられていても、ラベルからリンク先が全く推測できないことがあります。「ここ」「こちら」といったリンクテキストが使われるケースがよく見られます。しかし、このようなラベルではリンク先が全く推測できません。

多くの場合、前後の文章をしっかり読めばリンク先を推測できますが、斜め読みして素早くリンク先に行きたいユーザーもいます。また、ページ内のリンクを一覧表示する機能を持った支援技術もあります。一覧に「ここ」「こちら」などのラベルが並んでしまうと、ユーザーはリンク先を判別できません。

図
「ここ」「こちら」といったリンクテキストが使われている例。文脈がないとリンク先が全くわからない上、文脈の中でもリンク先が想像できないことが多い。

「もっと読む」「詳細」リンク

「もっと読む」「詳細」といったリンクラベルはよく使われます。直前の内容を読んでいればリンク先がわかりますが、このリンクを単独で抜き出すと意味が通じなくなってしまいます。リンク一覧を表示する機能を使った場合、「もっと読む」「詳細」などが並ぶとリンク先が判別できません。特に、このようなラベルは記事一覧ページで大量に使われることが多く、リンク一覧を表示した際の問題が起こりやすくなります。

図
「もっと読む」「詳細」といったリンクテキストが使われている例。一見問題ないが、リンク一覧の機能を使うと同じラベルが並んでしまい、どれがどれなのかわからなくなる。

バージョン違いや別フォーマットへのリンク

文中にリンクがあり、その後ろに(PDF版)(Word版)などのバージョン違いのリンクが提示されているケースがあります。本体のリンクテキストがわかりやすいものであっても、その後ろの「(PDF版)」「(Word版)」といったテキストは、単独で取り出すと意味がわからなくなってしまいます。特に、リンク一覧を表示したとき、「(PDF版)」「(Word版)」といったテキストが並ぶとリンク先の判別が難しくなります。

図
「PDF版」「Word版」などのバージョン違いのリンクが提示されている例。文脈から取り出すとリンク先がわからなくなる。

リンク先が推測できるテキストをリンクに含める

リンクには、リンク先のページタイトルを含めるなどして、リンク先が推測できるようにしましょう。リンクが単独で理解できると、流し読みで素早くリンクをたどったり、リンクを一覧表示する機能を利用できるようになります。

リンクにリンク先のタイトルを加える

リンク先のコンテンツに適切なタイトルがついている場合、タイトルをそのままリンクテキストにすると良いでしょう。「もっと読む」「詳細」のようなリンクの場合、リンク先のタイトルをつけ加えて「アクセシビリティとは? をもっと読む」「事業領域の詳細」のようにすると、リンク先の内容がわかりやすくなります。URLがリンクになっている場合も、リンク先のタイトルを併記すると良いでしょう。

図
「一覧を見る」「詳しく見る」にリンク先タイトルを併記した例。リンク先のタイトルがわかるため、リンク先の内容が想像できる。
※出典:大塚商会 http://www.otsuka-shokai.co.jp/products/

タイトルが長すぎたり、リンク先のタイトルが適切でない場合は、タイトルをそのまま使うことにこだわらず、適宜編集して、できるだけリンク先が想像できるようにしましょう。特に、大きな画像の中にクリックできる要素があるような場合は、長いタイトルがつけにくい場合があります。リンク先がわかるような短いラベルをつけると良いでしょう。

文中リンクを外に出して独立させる

長いテキストの文中にテキストリンクが含まれている場合、「ここ」「こちら」などの一般的な単語をリンクにしてしまったり、前後の文脈に依存したテキストになりやすい傾向があります。このような問題を避けるため、リンクはテキストの外に出して独立させると良いでしょう。こうすることで、視覚的に流し見したときにもリンクが見つけやすくなるというメリットがあります。

「(PDF版)」「(Word版)」といったバージョン違いのリンクを伴うケースについても、リンクを文中から出してしまえば、全てのリンクにタイトルを書いても冗長に感じられなくなります。

図
「こちら」リンクをやめて、リンクをテキストの下に独立させた例。ぱっと見てリンクがあることがわかりやすいというメリットもある。
※出典:FUJITSU JOURNAL(富士通ジャーナル) http://journal.jp.fujitsu.com/2015/06/01/01/

周辺のテキストをリンクに含める

スペースの都合などで、「続きを読む」リンクに対してタイトルをつけ加えることが難しい場合、見出しや概要などと組み合わせるという方法もあります。「続きを読む」リンクの前にはたいてい見出しや概要文がありますので、それら全体がひとつのリンクとして機能するようにします。「続きを読む」の前に見出しや概要のテキストが加わり、リンク先がわかるようになります。リンクの範囲が広がることで、ユーザーがクリックしやすくなるという副次的な効果もあります。

ただし、あまりにもリンクテキストが長くなると、リンク一覧の利用時に混乱を来たすことがあります。見出しと短い概要程度であれば問題ありませんが、長い文章を含む巨大なセクションをまるごとリンクにするのは避けるほうが良いでしょう

図
見出しや概要を含む全体をリンクにした例。クリックできるエリアが広くなるというメリットもある。
※出典:東洋大学 http://www.toyo.ac.jp/nyushi/finder/field.html

コラムWebを読みたくないユーザーは見出しやリンクテキストに注目する

ユーザーはテキスト全体の20%程度しか読まないという調査結果があります。Webページは解像度が低いため視認性が低く、読みやすいメディアとは言えません。また、スクロールが必要なため、一覧性も低いと言えます。Webではユーザーの動機が問題解決に寄っており、目的に沿った内容をピックアップして、素早く用件を済ませたい、という心理も働いているでしょう。

ユーザーはなるべくWebを読まずに用件を済ませようとします。このとき、ユーザーは見出しやリンクテキストに注目し、それらを拾い読みします。ユーザーは、自分が求めている情報がサイト内のどこにあるのか確信を持っていないため、それらしいページを読んでいる場合でも、「このページを読むことが本当に正解なのか?」「もっとふさわしいページがあるのではないか?」という疑念を持ち、さらに役立ちそうなページがないかを探しています。

リンクテキストが注目を集めることは、アイトラッキング調査(図8)でも明らかになっています。また、スクリーンリーダーにはページ内にあるリンクだけを抽出して読み上げる機能があります。この機能を使えば、視覚的にページを見ているユーザーと同じように、リンクだけに注目してすばやく次の行き先を探すことができます。

図
図8:リンクに注目しているアイトラッキング調査の例

リンクテキストを適切なものにすることは、ユーザー体験を形作る上で非常に重要な要素なのです。

『デザイニングWebアクセシビリティ
アクセシブルな設計やコンテンツ制作のアプローチ』

  • 著者:太田良典、伊原力也
  • 定価:本体3,000円+税
  • 発行:ボーンデジタル
  • ISBN:978-4-86246-265-7

本書はアクセシビリティのガイドラインを解説した内容ではなく、サイトの制作プロセスに沿った実践的な内容となっています。それぞれのプロセスの概要と注意点、ユーザーにとって問題が起きるポイント、そして解決アプローチを紹介しています。

本書に書かれた内容を実践し、問題として挙げている点をクリアすれば、WCAG 2.0のレベルAおよびAAの達成基準のほとんどを達成することができます。巻末には、WCAG 2.0の達成基準と本書の内容との対照表を掲載していますので、ガイドラインに沿う場合の参考としてお使いいただけます。

なお、本書では基本的にHTMLとCSSで作られた静的なコンテンツを扱っています。動画や音声、アプリケーションなどについては、基本的な考え方を示すにとどめました。JavaScriptを駆使したWebアプリケーションのアクセシビリティについては、本書の姉妹書である『コーディングWebアクセシビリティ』が入門的な内容となっていますので、あわせて参考にしていただければ幸いです。

この記事が役に立ったらシェア!
tweet33このエントリーをはてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める
日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

人気記事トップ10(過去7日間)

今日の用語

CPM
本来は、「広告が1000回表示されるごとに何円の費用がかかるか(かかったか)」を ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオープンテキスト株式会社トランスコスモス株式会社株式会社ハイパーボックスDomain Keeper
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社Sitecore