「クリックここ」リンクテキストの使用を避けるべき (2001)

概要

リンクテキストは 簡潔かつ意味のある表現 を選ぶべき。文脈外でも 内容が伝わる リンクテキストが重要。リンクテキストに 動詞句や操作手順 を避ける推奨。 W3C のガイドラインや事例を参考に解説。 QA Tips は開発者向けの補足知識を提供。

リンクテキストの意味と推奨事項

リンクテキストは 短く、意味のある表現 が重要
文脈から切り離しても 内容が分かる ようなテキストを選択
リンクが 何を提供するか 説明する内容が望ましい
操作手順 や 動詞句 （例：クリックしてください）は避ける
リンク先の内容や特典 を直接示す表現を推奨

避けるべきリンクテキスト例

「W3Cのエディタ／ブラウザAmayaをダウンロードするには、 ここをクリック してください。」
「Amayaをダウンロードするには、Amaya Websiteに移動して 必要なソフトウェアを入手 してください。」
- これらは 操作手順 に言及しすぎており、 リンクの意味が薄い 表現

推奨されるリンクテキスト例

「 Amayaの入手」
「Amayaについてもっと知る：W3Cの無料エディタ／ブラウザで、HTML・SVG・MathMLドキュメント作成が可能」
- リンク部分 には動詞や命令形を使わない
- リンク外 でアクションを呼びかける場合は、リンクテキスト自体は 名詞や説明的な語句 にする

参考資料

W3C HTML Techniques for Web Content Accessibility Guidelines 1.0「 6.1 リンクテキスト」セクション
Tim Berners-Leeによる「 Style Guide for online hypertext」での「操作手順を避ける」推奨
Jutta Degener著「 What is good hypertext writing?」でのハイパーテキストコピーの書き方
www-qaメーリングリストでの議論スレッド

QA Tipsについて

W3C QA Tips はWeb開発者やデザイナー向けの 知識共有ドキュメント
Quality Assurance Interest Group が作成・公開
公式な技術仕様ではなく、参考情報として利用
Tips Indexで 他のQA Tipsや投稿方法 も確認可能

Hackerたちの意見

イギリスの政府デジタルサービスも、アクセシビリティガイドラインで似たような推奨をしています。

└

彼らの推奨はかなり異なります。W3Cはこう言っています：「Amayaを取得」 Amayaについてもっと読む「ホームオフィスはこう言っています：Get Amaya Read more about Amaya」これはずっと理にかなっているように思えますが、文脈で使うと別の問題が生じます。個人的には、両方が異なるユースケースを混同していると思います。リンクはテキスト内でインラインに使われることが多いです。W3Cとホームオフィスが扱っているユースケースは、アウトオブラインボタンで対処する方が良いものです：[ダウンロード] [ドキュメント] でも、インラインテキストのハイパーリンクのユースケースではどちらも壊れているように見えます。具体的な例を挙げると、以下のように書き直すべきでしょうか？「PiPedalはRaspberry Piで動作するギターエフェクトペダルです。PiPedalをダウンロードするには、ここをクリック。ドキュメントを読むには、ここをクリック。」異議は理解できます。でも、その修正は受け入れがたいです。「PiPedalはRaspberry Piで動作するギターエフェクトペダルです。Pipedalを取得。ドキュメントを読む。」これは無理です。何て呼ぶべきか分かりません。メタ文法的に間違っている？何であれ、自然な英語ではありません。「PipedalはRaspberry Piで動作するギターエフェクトペダルです。PiPedalをダウンロードするには、ダウンロードページを訪れてください。Pipedalについてもっと知りたい場合は、ドキュメントを見てください。」多分、これが私がドキュメントで使った実際のテキストです。でも、個人的な経験から言うと、「ここをクリック」を名詞化するのは非常に難しいことが多いです。Ubuntu Serverのインストールはこの問題に悩まされませんが、Ubuntu Serverのインストールを選ぶ前に、「Ubuntuにインストール」ページのUbuntu Serverセクションを読むべきです。これにより、「ここ」が参照されるコンテンツの代名詞として使われるときに、何が問題なのかが気になります。このユースケースでは、実際のアクセシビリティの問題はありません。なぜなら、リンクは文中にあり、クリックしたときに何を期待するかを示すために必要なすべての文脈を提供しているからです。そして最初の例では、テキストはウェブページのリードからのもので、簡潔さが重要です。「PiPedalをダウンロードするには、ここをクリック。」これは本当にアクセシビリティの問題ですか？特にその上に[ダウンロード] [ドキュメント]というボタンがあるときは。ここで重要なのは、ダウンロードページを訪れる人が何人いるかです。その観点から見ると、以下のテキストが良くなるかどうかには大きな疑問があります。「PiPedalをダウンロードするには、ダウンロードページを訪れてください。」

└

私たちはこのウェブサイト/ガイドラインを、最大限にアクセシブルなコンポーネント/ウェブデザインの参考としてよく参照しています。本当に良いです。見た目はあまり良くないですが（フォームコンポーネントに厚い黒/黄色の境界線など）、アクセシビリティはデザインよりも重要です。

アクセシビリティの観点から考えると、視覚障害者向けのスクリーンリーダーはページを線形的に表示します。線形表示から抜け出すために、通常、ユーザーはヘッダーやリンクのリストにアクセスできるようになっていますが、元の位置からは文脈が外れています。もしすべてのリンクが「ここをクリック」とラベル付けされていると、実質的にそのユーザーたちから非線形アクセスを奪ってしまうことになります。

└

スクリーンリーダーは、リンクが何のためのものかを読み上げるくらい賢くあるべきです。

└

これは私が考慮していなかったことで、私の考えを変えました。

└

スクリーンリーダーは、ページ内を移動するためのいくつかの異なる方法を提供していて、ページを直線的に移動するのは最も効率が悪い方法なんだ。ユーザーは、例えばランドマークや見出しの間を移動したり、両方を同時に「アウトライン」ナビゲーションモードで移動したりできる。重要なのは、スクリーンリーダーのナビゲーションはキーボードナビゲーションとは違うってこと。

└

それを解決するテクニックがあるよ：https://www.w3.org/WAI/WCAG22/Techniques/html/H33 https://www.w3.org/WAI/WCAG22/Techniques/css/C7 でも、最初のリンクがスクリーンリーダーでどれくらいサポートされているかは分からない。（編集：リンクをWCAG 2.0から2.2に更新したよ。）

└

もしすべてのリンクが「Amaya」だけで動詞がないなら、何が何だか分からなくなるよね。だから「get Amaya」と「Amayaのウェブサイトに行く」はかなりいいと思う。あと、ダウンロードボタンがgithub.ioにあって、sourceforgeみたいなマルウェアサイトから実行ファイルを引っ張ってくるのは良くないよ。wxMaximaを見てるよ。

└

それはいい意見だね。記事のように「Amaya」じゃなくて、「Get Amaya」といったアクションをもっと含めた方がいいと思う。

└

皮肉なことに、アクセシビリティツールを必要としていない人たちにも、もっとアクセスしやすくする方法を見つける必要があるよね。ツールを変えろとは言ってないけど、スクリーンリーダーがどう機能するかを理解しようとしない人たちのために、これを可視化する方法が絶対にあるはずだよ。

└

確かに。でも、ヘッダーのリンクを全部「ここをクリック」ってラベル付けする人いる？インラインハイパーリンクとは全然違う使い方だよね。

└

それは絶対に違うと思う。スクリーンリーダーはHTMLリンクが含まれたテキストを読み取れて、次のリンクや現在のリンク、前のリンクを開けるはずだよ。それができないなら、何ができるの？とにかく、「ここをクリック」は他の人にとってもっとアクセスしやすいよね。リンクはリンクらしく見えるべきで、テキストの中にランダムに半分太字の言葉があっても意味ないよ。

W3Cは「ここをクリック」の最大の問題を見逃しています（私の意見では）* これはたったの10文字で、他のリンクとインラインで並ぶとクリックするには短すぎます。テキストがモラセスJSで画面上をうねうね動いて、短い10文字がようやく静止するまで数秒かかるのは言うまでもありません。* 高解像度のタッチスクリーンでは、実際にそこをクリックするのは80%くらいの精度です。再度言いますが、私の精度は太い指で、近くのリンクはUIの地雷です。

└

10文字のテキストリンクが操作するのに大きな問題を引き起こすなら、ブラウザかウェブページのどちらかに本当に問題があるってことだよ。10文字のリンクがあること自体に問題があるわけじゃない。

└

たった10文字で、他のリンクと並んでるとクリックするには短すぎるよね。モラセスJSで画面をうろうろするテキストのことは言わないでおこう。数秒間、テキストが上下左右に動き回って、やっとその短い10文字が静止するまでの間に。2010年にはそんなに問題じゃなかったし、ハイパーリンクのサイズで解決するようなことでもないよね。

└

そうそう！大きくて目立つリンクが最高だよ。タッチスクリーンはほとんど使えないし、マウスでもちょっと不便なんだ。世の中は同情してくれない。人々を恥じさせたり罪悪感を持たせたりするために、「スロブ症候群」みたいな病気が必要だよ。

個人的には、彼らが推奨しない第二の例が好きです。（「Amayaをダウンロードするには、_Amaya_Website_に行って必要なソフトウェアを取得してください。」）「Amaya」とだけ書かれたリンクは内部リンクか外部リンクかもしれませんし、文脈からリンクをたどる目的がAmayaをダウンロードすることであることが明らかでも、ファイルへの直接リンクなのかダウンロードページへのリンクなのかは明確ではありません。

└

内部リンクと外部リンクの区別は、ウィキペディアなどが使っている小さなアイコンで解決済みだよね。

└

目的地が外部リンクかファイルかを示すアイコンを入れるのが好きだな（ファイルの場合はファイル拡張子でもいいかも）。

もしかしたら年のせいかもしれないけど、リンクは名詞を指すものだと思ってる。リンクは場所を指して、その場所には名前があって、動詞じゃなくて形容詞かも。だから、私のウェブサイトへのリンクはいいけど、私のウェブサイトへのリンクは本質的にダメなんだ。命令口調がすごく苦手だから、「私のウェブサイトに行って」や「このリンクをフォローして」なんて絶対書かないよ。

全く同意できない。彼らの「悪い」例：> W3Cのエディタ/ブラウザAmayaをダウンロードするには、ここをクリック。これは非常に明確だよ。リンクをクリックすれば、直接ダウンロードされるか、ダウンロードページに行くかのどちらかだよね。対照的に：> _Amaya_をゲット！これはAmayaのウェブサイトへのリンクを示唆してるだけで、ダウンロードページじゃない。それじゃダウンロードには効果的じゃない。同様に：> _Amaya_についてもっと教えて：W3Cの無料エディタ/ブラウザで、HTML、SVG、_MathML_ドキュメントを作成できる。これはひどい。ダウンロードのことじゃないし、「もっと教えて」が命令だけど、リンクされてない！私が知る限り、「Amaya」のリンクは企業のランディングページに行くかもしれないし、実際に必要な「もっと教えて」情報には行かない。ウェブ上の一般的な使い方は全然問題ないよ：> W3Cのエディタ/ブラウザAmayaをダウンロードするには、ここをクリック。> _Amaya_をダウンロード、W3Cのエディタ/ブラウザ。リンクは動詞であるべきじゃないって考えはすごくおかしいと思う。リンクは絶対に動詞であるべきだし、ダウンロードやもっと知るというアクションを含む時は特にね。もちろん、Wikipediaのような「参照」リンクとは違うけど、トピックについてもっと知るためのものだし。「ここをクリック」と言うことで、リンクが単なる参照リンクじゃなくてアクションリンクであることが明確になる。> _Amaya_をゲット！それは... Amayaをどうやって手に入れるか教えてくれない。これは「Amaya」が参照リンクで、ダウンロードリンクじゃないってことを示してる。

└

「ここをクリック」リンクはすごく嫌い。リンクを探してる時は、興味のあるリンクを見つけるために、ページ上のリンク形式の言葉だけを読みたいんだ。「Amayaをダウンロード」っていうのは素晴らしいリンクだよ。ただの「Amaya」(情報ページに行く場合を除いて)や「ここをクリック」はダメだね。

└

スクリーンリーダーを使ってみて。リンクをタブで移動してみて。聞こえてくるのは「ここをクリック」だけ。それじゃ役に立たないよ。検索エンジンを作ってみて。「ここをクリック」って、あなたのインデックスに何の情報を提供するの？動詞が問題に見えないのは同意するけど、動詞が「クリック」で、目的語が「ここ」だと話は別だよね。「Amayaをダウンロードするにはここをクリック」っていうリンクは我慢できるけど、リンクがただ「ここをクリック」って二言だけだと、いろんな文脈で他のリンクと区別がつかないよ。

└

_Amaya_をゲットしよう！ > それはAmayaのウェブサイトへのリンクを示唆してるけど、ダウンロードページじゃないね。ダウンロードには効果的じゃないよ。彼らの例では、リンクはAmayaのホームページに繋がってて、実際のダウンロードページじゃない（実際のダウンロードはさておき）。「ここをクリック」という問題を混同してるせいで、メッセージがかなり薄まってるみたいだね。他のコメントでも言われてるけど、これはアクセシビリティの問題だし、テキストがターゲットを正確に反映してるかどうかとは別の話だよ。

└

うん、例は間違ってるし、同じように解釈するよ。原則には賛成だし、守るようにしてるけどね。

└

大体同意するよ。一つの用語の難しさは、ウェブサイトによってはほとんどのユーザーがもう「クリック」じゃなくて「タップ」するから、「ここを見て」みたいなのがもっと普遍的かもしれないってことだね。

└

初期のウェブはこういうリンクで溢れてた。時間が経つにつれて、もっと多くのアクションが直接ラベルの付いたボタンになったんだ。これで、明らかに悪いリンクパターンが置き換えられた。例えば： - この購入をキャンセルするには [ここをクリック]。 - この購入を完了するには [ここをクリック]。

ああ、これが出たときのことを思い出すな。あの頃はウェブ上に「ここをクリック」リンクが溢れてた。これが問題解決に大きな影響を与えたんだよね。もしかしたらSlashdotにも載ってたかも。

「パスワードを忘れました」というリンクについて読んだ投稿を思い出すな。これを「ここをクリックして…」みたいに言い換えたら改善されるかなと思ったけど、なんか直感的にそれも違うって分かってた。 > ウェブページのゴミを無視するスキルは、持ってない人もいるし、どうやって教えればいいのか分からない。自分のバックグラウンドがない人を手伝おうとするたびに思い出すよ。ページの最初にあるものをじっくり見て、「通知を有効にしてください」みたいなことを考えた後に、やっとページの二つ目を見るユーザーもいるからね。 > Google検索が実際の結果の前にゴミの山を出すようになった今、ほんとに。 > 関連する問題は、ページ上の異なる種類のテキストの認識状態を理解できないことだね。例えば、「パスワードを忘れました」というクリック可能なリンクを見て、それが自分がパスワードを忘れたって言ってる（そしてそれがどうやって知ってるの？）と信じるユーザーがいるってこと。 > UIの標準化が死んだことで、この問題はさらに悪化してるよね。

Dragan Espenschied（despens）が2022年に書いたエッセイがあって、リンクテキストが時間とともにどう変わったかについて触れてるよ。 > 彼は、行動を促すものから、ユーザーを説明するボタンテキストへのシフトを指摘してる。「代わりに、ユーザーの状態を再構成することが求められている。ユーザーは、次の情報にアクセスする前に、明示されたマントラを受け入れ、自分の態度を変えなければならない。」

自分の好みを規則として押し付けようとする人がいると、いつもイライラする。全ての例は大体良いけど、いくつかは他より少し良いって感じだね。

ハクソク