文脈がなくても意味が通るリンクテキスト
「ここをクリック」をやめ、リンクだけでも内容が伝わるようにします。
「文脈がなくても意味が通るリンクテキスト」はCoddyKit上の無料Web Accessibility Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。
文脈から切り離されたリンク
スクリーンリーダーのユーザーは、ページ上のすべてのリンクの一覧を表示することがあります。周囲の文章がなくても、それぞれ単独で意味が通じなければなりません。
「ここをクリック」の落とし穴
10個のリンクがすべてここをクリックとだけ書かれている状態を想像してください。文脈から切り離すと、区別する情報がないため役に立ちません。😕
<a href="/report">click here</a>移動先を説明する
適切なリンクテキストでは、移動先を示します。ページやドキュメントのタイトルを使うと、リンクだけを読んでも意味が明確になります。
<a href="/report">Read the 2025 report</a>「続きを読む」では不十分
続きを読むや詳細を見るといった表現はページ内で繰り返されるうえ、実際にどこへ移動するのかを伝えません。
意味を先に置く
リンクの先頭に、最も役立つ語を置きます。先頭の文字でスキャンするユーザーは、そのほうが目的のリンクを早く見つけられます。
URLだけを使わない
リンクテキストに生のURLを使うと、長い文字とスラッシュの列として読み上げられます。代わりに、移動先を示す自然な言葉を使います。
同じリンクは表現もそろえる
同じ場所へ移動する2つのリンクには、同じtextを付けます。1つの移動先に異なる表現を使うと、ユーザーを混乱させます。
さらに情報が必要な場合
短い表示テキストを維持する必要がある場合は、aria-labelで、スクリーンリーダーが読み上げるより詳しいアクセシブルな名前をリンクに付けられます。
<a href="/report" aria-label="Read the 2025 report">Read more</a>表示と読み上げを一致させる
ラベルを追加するときは、アクセシブルな名前の中に表示されている語句を含めてください。そうすれば音声操作のユーザーも、見えている言葉を使って操作できます。
アイコンだけのリンクに注意する
アイコンだけのリンクには読み上げるテキストがありません。表示ラベルまたはアクセシブルな名前を必ず付け、何もない状態にはしないでください。
「リンク」という語は省く
通常、テキストにリンクという語を含める必要はありません。スクリーンリーダーがすでに役割を読み上げるため、2回聞こえることになります。
確認問題
「ここをクリック」のようなリンクテキストが、スクリーンリーダーのユーザーにとって問題になるのはなぜでしょうか。
まとめ
単独で意味が通じ、移動先を示すリンクテキストを書きましょう。「ここをクリック」をやめれば、すべてのリンクが自分で説明できるようになります。✨
よくある質問
「文脈がなくても意味が通るリンクテキスト」レッスンは無料ですか?
はい。「文脈がなくても意味が通るリンクテキスト」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。
「文脈がなくても意味が通るリンクテキスト」で何を学びますか?
「ここをクリック」をやめ、リンクだけでも内容が伝わるようにします。 ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Web Accessibility Academyを始めるのに経験は必要ですか?
事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「文脈がなくても意味が通るリンクテキスト」レッスンにはどのくらい時間がかかりますか?
ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このWeb Accessibility Academyレッスンでコードを書いて実行できますか?
はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- リンクは場所へ、ボタンは動作へ
- 文脈がなくても意味が通るリンクテキスト
- 動作を伝えるボタン
- hrefのないアンカーというアンチパターン