誰もが理解できるリンク: 「ここをクリック」と書いてはいけない理由

これを試してください。目を閉じて、誰かがページ上のすべてのリンクのリストを、周囲のテキストを除いて、リンク テキスト自体だけを次々と読み上げているところを想像してください。リストが「ここをクリック、ここをクリック、続きを読む、ここをクリック」のように聞こえる場合、多くのスクリーン リーダー ユーザーが経験するのはまさにこれです。なぜなら、スクリーン リーダー ユーザーはドキュメント内をすばやく移動するために「リンク リスト」機能を使用しているからです。

「ここをクリック」が失敗する理由

WCAG 基準 2.4.4 (「コンテキストにおけるリンクの目的」) では、リンク テキストがその直接のコンテキストとともに、どこにつながるのか、または何をするのかを説明する必要があります。 「ここをクリック」と「続きを読む」は、それ自体では何も言わないため失敗します。これらは完全に周囲のテキストに依存しており、スクリーン リーダーのリンク リストを使って移動しているユーザーにはそのテキストが聞こえません。

適切なリンクテキストの書き方

最も単純なルール: リンク テキストは、クリック メカニズムではなく、リンク先またはアクションを説明する必要があります。 「年次報告書をダウンロード (PDF、2MB)」は、「ここをクリックして報告書をダウンロード」よりもはるかに優れています。 「詳細についてはここをクリックしてください」よりも「当社のプライバシー ポリシー全文をお読みください」の方が適切です。ダウンロード可能なファイルの場合、括弧内にタイプとサイズをメモしておくこともお勧めします。これは、スクリーン リーダーを使用しているユーザーだけでなく、すべてのユーザーにとって役立ちます。

近くのコンテキストで実際に十分な場合

WCAG では、どのような場合でもリンク テキストが完全に独立している必要はありません。視覚的にだけでなく、スクリーン リーダーからもコンテキストにアクセスできる限り、直接のコンテキスト (同じ段落または同じリスト項目) に依存することができます。実際の問題: 記事リスト内で繰り返される「続きを読む」リンクは境界例の好例です。視覚的には各「続きを読む」がどの記事に属しているかは明らかですが、独立したリンク リストではすべて同じに聞こえます。一般的な解決策: 視覚的には隠されているがスクリーン リーダーでアクセスできる追加のテキストをリンクに追加します (たとえば、「[記事タイトル] について詳しく読む」)。これにより、視覚的な表示と読み上げバージョンの両方が適切に機能します。

PDF ドキュメントでの動作方法

PDF ドキュメントでは、リンクはタグ ツリー内の Link オブジェクトとしてタグ付けされ、内部テキストがまさに読み上げられます。 Word からエクスポートされた文書によくある問題: 完全な URL がリンク テキスト自体 (「https://example.com/very/long/path/document.pdf」) として貼り付けられます。スクリーン リーダーはアドレス全体を 1 文字ずつ、またはセグメントごとに読み上げるため、聞くに耐えられません。修正: リンク テキストを短く明確な説明に置き換え、完全なアドレスは表示テキストとしてではなく、宛先 (URL 自体) としてのみ保持します。