ハクソク

世界を動かす技術を、日本語で。

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

2025年7月2日原文(w3.org)

概要

リンクテキストは 簡潔かつ意味のある表現 を選ぶべき。 文脈外でも 内容が伝わる リンクテキストが重要。 リンクテキストに 動詞句や操作手順 を避ける推奨。 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」といったアクションをもっと含めた方がいいと思う。

└

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

└

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

Hacker Newsで議論の続きを見る