「ここをクリック」のようなリンクテキストを使ってはいけない (2001)
(w3.org)- 「ここをクリック」 のような一般的なリンクテキスト使用の問題点を強調
- アクセシビリティ 向上の観点から、リンクテキストは コンテンツの意味 を明確に伝える必要がある
- 検索エンジンおよび スクリーンリーダー利用者の体験 に悪影響を及ぼす
- 明確で 文脈を反映したリンク文言 は、ユーザーにも技術にも利点をもたらす
- 2001年から Web標準とUX原則 の観点で、適切なリンクテキストを推奨する動きが進められてきた
はじめに
- 「ここをクリック」または「click here」のような 一般的なリンクテキスト の使用は、古くからWeb開発者の間で一般的な慣行として定着してきた
- しかし、このような方法には アクセシビリティ、ユーザビリティ、SEO の面で重要な欠点がある
リンクテキストの意味と問題点
- リンクテキストは、ユーザーが クリックする前にそのリンクがどこへ移動するのか を予測できるよう、情報を提供する役割を担うべきである
- 単に「ここをクリック」と書かれているだけでは、文脈なしにリンクが存在することになり、ユーザーの混乱 と アクセシビリティ低下 を招く
アクセシビリティとユーザー体験への影響
- スクリーンリーダー利用者は、ページ内のリンク一覧をたどる際に、どれも「ここをクリック」という同じ内容として読み上げられるため、情報の把握が困難 になる
- リンクが 意味を含む具体的な文言 で書かれていると、視覚障害者を含むさまざまな状況のユーザーにとって 体験の効率性 が高まる
検索エンジン最適化（SEO）の考慮事項
- 検索エンジン もリンクテキストを分析し、コンテンツの関連性や品質を判断する
- 重要なキーワードや文脈を含むリンクテキストは、検索順位や露出度 の向上に好影響を与える
適切なリンクテキストの書き方の推奨
- 文脈を明確に反映したリンクテキストの使用を推奨
- 例: 「最新のアクセシビリティガイドラインを確認」 など
- こうした原則は、2001年以降 Web標準の登場とUX強化 の流れの中で継続的に強調されてきた
結論
- 「ここをクリック」ではなく 意味のあるテキスト をリンクとして使うことが、現在のWebでも将来のWebでも不可欠な基準である
1件のコメント
Hacker News のコメント
アクセシビリティの観点から見ると、視覚障害者向けのスクリーンリーダーはページを線形に読み上げる。
線形読み上げから外れるために、見出しやリンクのような要素の一覧を、元の位置の文脈なしに別途移動できるようにしていることも多い。
すべてのリンクが「click here」なら、こうしたユーザーから非線形アクセスを事実上奪っていることになる。
だから「get Amaya」や「go to the Amaya website」くらいならよさそうに思える。
また、github.io のダウンロードボタンが、SourceForge のようなマルウェアサイト扱いされる場所から実行ファイルを取得させるのはよい方法ではない。wxMaxima を思い出す。
ツールを変えようという意味ではないが、スクリーンリーダーがどう動作するのかを自分で掘り下げない人たちに、それを視覚化して見せる方法はあるべきだと思う。
ただし、1つ目がスクリーンリーダーでどの程度サポートされているかは分からない。
追記: リンクを WCAG 2.0 から 2.2 に更新した。
それでも記事の例のように「Amaya」だけにするよりは、「Get Amaya」のように動作をもっと含めるだろう。
ユーザーは例えばランドマーク間、見出し間、あるいはその両方をアウトラインナビゲーションモードで移動できる。
核心は、スクリーンリーダーのナビゲーションはキーボードナビゲーションと同じではないという点だ。
まったく同意できない。彼らが悪い例として挙げた「To download W3C's editor/browser Amaya, click here.」は非常に明確だ。
リンクを押せば、すぐにダウンロードされるか、ダウンロードページへ行くだろう。
逆に「Get Amaya!」は Amaya のウェブサイトへのリンクのように見えて、ダウンロードページには見えず、ダウンロードには効果的ではない。
「Tell me more about Amaya: W3C's free editor/browser that lets you create HTML, SVG, and MathML documents.」もいまいちだ。ダウンロードに関する文ではないし、「tell me more」は命令なのに、肝心のリンクではない。
ウェブの慣習的な使い方、つまり「To download W3C's editor/browser Amaya, click here.」や「Download Amaya, the W3C's editor/browser.」はまったく問題ない。
リンクが動詞であってはならないという考えは、かなり奇妙に見える。ダウンロードや詳しく見るのように動作を含むなら、リンクは当然動詞になり得る。
Wikipedia の参照リンクのように、あるトピックについて詳しく知る場合とは違う。
「click here」は、そのリンクが単なる参照リンクではなくアクションリンクであることを非常に明確にしてくれる。「Get Amaya!」を見ると、Amaya をどう入手するかを教えているのではなく、「Amaya」がダウンロードリンクではない参照リンクだと感じる。
検索エンジンを作るとしても、「click here」がインデックスにどんな情報を与えるというのか。
動詞自体が大きな問題だという点には同意しないが、動詞が click で目的語が here なら話は別だ。
「Click Here to download Amaya」というリンクテキストなら我慢できるが、リンクが文字どおり「click here」の2語だけなら、多くの文脈で他のリンクと区別できない。
「Download Amaya」は優れたリンクになり得る。単に「Amaya」だけ、または「click here」だけというのは、Amaya の情報ページへ行く場合でない限りよくない。
結局「click here」問題は他のコメントが言うようにアクセシビリティの問題なのに、リンクテキストがリンク先を正確に反映しているかどうかと混ぜてしまい、メッセージがかなりぼやけているように思う。
aria-describedbyは助けになり得るが、リンク内のテキスト自体をよりよくすれば、その必要を避けられる。動詞については同意する。
英国の Government Digital Service も、アクセシビリティのガイドラインで似たような推奨をしている: https://design.homeoffice.gov.uk/accessibility/links
いちばん見た目が美しいわけではないが、フォームコンポーネントの太い黒/黄色の枠線のようなものよりも、アクセシビリティがデザインに優先する
W3C は “Get Amaya”, “Read more about Amaya” とし、Home Office は “Get Amaya”, “Read more about Amaya” としている
後者のほうがずっと合理的に見えるが、文脈の中で使うと別の問題が生じる
個人的には、どちらも異なる2つのユースケースを混同していると思う。リンクは文中でインラインに使われることが多く、W3C と Home Office が扱っている例は、むしろ文の外にあるボタン、たとえば
[Download],[Documentation]として処理するほうがよいしかし、インラインテキスト内のハイパーリンクというユースケースでは、どちらも不自然に見える
たとえば “PiPedal is a guitar effects pedal that runs on Raspberry Pi. To download PiPedal, click here. To read the documentation, click here.” はどう直せばよいのだろうか？
反対する理由は理解できるが、“PiPedal is a guitar effects pedal that runs on Raspberry Pi. Get Pipedal. Read the documentation.” のような修正は受け入れがたい。英語の慣用に合っていない
実際の文書では “To download PiPedal, visit the Download Page. To learn more about Pipedal, view the Documentation.” のように書いたが、経験上 “click here” を名詞化するのは、しばしば非常に難しい
“Ubuntu Server installs don't suffer from this problem; but before choosing an Ubuntu Server install, you should read the Ubuntu Server section of the "Installing on Ubuntu" page.” のような文ではなおさらだ
そうなると、“here” を参照先の代名詞として使うことの何が正確に悪いのか疑問に思う
このユースケースでは、リンクが必要な文脈をすべて提供している文の中にあるため、実際にはアクセシビリティ上の問題がない可能性もある
最初の例も、簡潔さが重要なウェブページのリード文だ
“To download PiPedal, click here.” は本当にアクセシビリティ上の問題なのだろうか？ すぐ上に
[ Download ] [ Documentation ]ボタンがあるなら、なおさらだここで実際に重要な指標は、人々がダウンロードページをどれだけ訪れるかだ
その観点では、“To download PiPedal, visit the Download Page.” のほうが良いのか、かなり疑わしい
個人的には、彼らが避けるように言っている2つ目の例のほうが良いと思う: “To download Amaya, go to the Amaya_Website and get the necessary software.”
“Amaya” だけのリンクでは内部リンクなのか外部リンクなのか分からず、文脈上 Amaya をダウンロードする目的が明らかでも、ファイルに直接飛ぶのかダウンロードページへ行くのか分かりにくい
年を取ったせいかもしれないが、リンクは常に本能的に名詞を指すものだと思ってきた
リンクはどこかの場所を指し、その場所には動詞や形容詞ではなく名前がある
だから「私のウェブサイト」へのリンクは問題ないが、「私のウェブサイトへ行く」のようなリンクは本質的にしっくりこないと感じる
命令形の口調も強く嫌いなので、“go to my website” や “follow this link” のような文は絶対に使わない
ただしリンクが何かのダウンロードのような動作を開始する場合は曖昧になる。それでもそれを「ダウンロード」や「ダウンローダー」という名詞と見れば、やはり名詞ではある
これはおそらく、私が最後まで譲らないインターネット上の論争ネタだ
行動喚起文は別の問題だが、“here” という単語だけにリンクを張るページは、ハイパーテキストという媒体を理解していない書き手の明白な失敗だ
“click here” は、誤って残してしまったト書きのように見える
ほとんどの書き手は文章を書くとき、ハイパーテキストの文脈で書いておらず、Markdown のようなリンク記法の代わりにト書きをデフォルトにしている
「I forgot my password」と書かれたリンクについての記事を思い出した
「click here if...」と書けばましになるのかと考えたが、直感的にそれも違うと分かった
Webページ上の役に立たない要素を無視するのは、人によっては身に付いていないスキルであり、それをどう教えればよいのか分からない
前提知識のない人にWebの使い方を手助けするたびに思い出す。あるユーザーは、ページ上の文字どおり最初の項目が「Please enable notifications」だったとしても、2番目の項目を見る前にそれを慎重に考え込んでしまう
Google検索も今では実際の結果の前に何画面分ものゴミを表示するので、なおさらだ
関連する問題として、ページ内テキストの認識論的地位を種類ごとに理解できない場合がある
例えば「I forgot my password」というクリック可能なリンクを見て、それがパスワードを忘れたときに押す場所という意味ではなく、自分がパスワードを忘れたと伝えている文だと信じるユーザーもいる
もちろん、UI標準化の死がこの問題をはるかに悪化させている
https://mstdn.io/@mattskala/113188291223682980
MicrosoftがUIから多くのボタンをなくし、曖昧に色の付いたテキストリンクに置き換えていた時期を覚えている。その後、何をクリックすべきかを見分けるのがずっと難しくなった
ユーザーは直感的に機械に適応し、開発者はユーザーに適応することで、フィードバックループが生まれる
言い換えれば、無数のWebサイトやアプリに「I forgot my password」リンクがあったために、言葉の意味も変わった可能性が高い
少なくともその文脈では、ほとんどの人が意図を理解するよう適応するだろう
他のやり方を知らない若い世代は、それを気にするべきものとも見なさないかもしれない
だから慣習は切り離して見れば筋が通らなくても、慣習を維持する価値もある
すべての例が一貫して実際に「Amaya」をダウンロードするという前提なら、単にハイパーリンク Download Amaya の方がよさそうだ
可能なら、実際のファイルに行くことを示すダウンロードアイコンもあるとよい
本物のダウンロードボタンが、4つの広告の間に隠れた別ページへのリンクではないと分かるからだ
Dragan Espenschied（despens）は2022年に、リンクテキストが時間とともにどう変わってきたかについて記事を書いている: https://despens.systems/2022/06/button-pushes-you/
彼は、行動を促す文言から、ユーザーを描写するボタンテキストへの移行を指摘している
「代わりに、それらはユーザーの状態を再構成しなければならない。ユーザーは次の情報にアクセスする前に、書かれた呪文を受け入れ、態度を変えなければならない」といったものだ
「Get Amaya.」「Tell me more about Amaya.」は優雅には見えない