文脈がなくても意味が通るリンクテキスト

スクリーンリーダーのユーザーは、ページ上のすべてのリンクの一覧を表示することがあります。周囲の文章がなくても、それぞれ単独で意味が通じなければなりません。

10個のリンクがすべてここをクリックとだけ書かれている状態を想像してください。文脈から切り離すと、区別する情報がないため役に立ちません。😕

適切なリンクテキストでは、移動先を示します。ページやドキュメントのタイトルを使うと、リンクだけを読んでも意味が明確になります。

続きを読むや詳細を見るといった表現はページ内で繰り返されるうえ、実際にどこへ移動するのかを伝えません。

リンクの先頭に、最も役立つ語を置きます。先頭の文字でスキャンするユーザーは、そのほうが目的のリンクを早く見つけられます。

リンクテキストに生のURLを使うと、長い文字とスラッシュの列として読み上げられます。代わりに、移動先を示す自然な言葉を使います。

同じ場所へ移動する2つのリンクには、同じtextを付けます。1つの移動先に異なる表現を使うと、ユーザーを混乱させます。

短い表示テキストを維持する必要がある場合は、aria-labelで、スクリーンリーダーが読み上げるより詳しいアクセシブルな名前をリンクに付けられます。

ラベルを追加するときは、アクセシブルな名前の中に表示されている語句を含めてください。そうすれば音声操作のユーザーも、見えている言葉を使って操作できます。

アイコンだけのリンクには読み上げるテキストがありません。表示ラベルまたはアクセシブルな名前を必ず付け、何もない状態にはしないでください。

通常、テキストにリンクという語を含める必要はありません。スクリーンリーダーがすでに役割を読み上げるため、2回聞こえることになります。

「ここをクリック」のようなリンクテキストが、スクリーンリーダーのユーザーにとって問題になるのはなぜでしょうか。

単独で意味が通じ、移動先を示すリンクテキストを書きましょう。「ここをクリック」をやめれば、すべてのリンクが自分で説明できるようになります。✨