概要
リンクテキストとは、リンクの実際にクリック可能な単語のことです — 「価格を見るにはここをクリック」では、「ここをクリック」がリンクテキストですが、その文で実際に意味を運んでいるのは「価格」という単語です。このチェックは、リンクが実際にどこにつながるかを示す説明的なテキストとは対照的に、「ここをクリック」「詳細を見る」「リンク」のようなあいまいで汎用的なテキストを持つリンクを探します。
多くのスクリーンリーダーには、ユーザーがページ上のすべてのリンクのリストを、周囲の文のコンテキストから完全に切り離して呼び出せる機能があり、これは特にページを素早く移動するためのものです — これがまさに、汎用的なリンクテキストが機能しなくなる状況です。
重要な理由
スクリーンリーダー利用者がそのリンクのリストをコンテキストなしで呼び出すとき、すべて「ここをクリック」や「詳細を見る」と言うリンクでいっぱいのページは、あるリンク先を別のものと区別する方法をまったく与えません — 彼らはページのコンテンツをナビゲートする本当に役立つ方法の代わりに、同一の意味のない項目のリストを残されます。その特定の機能を使用しなくても、文の途中で単に「ここをクリック」と読み上げられるリンクは、それに従うかどうかを決める前に、どこにつながるかの事前の手がかりをまったく与えません。
これは純粋に文章上の、コードなしの修正です — 多くのアクセシビリティ問題とは異なり、技術的な変更はまったく必要なく、同じリンクに対して異なる言葉を選ぶだけです。
修正方法
- ページのコンテンツで、クリック可能なテキスト全体として使われている「ここをクリック」「詳細を見る」「もっと見る」「リンク」のような汎用的なリンクフレーズを検索しましょう。
- リンクテキスト自体が行き先を説明するように、それぞれを書き直しましょう — 例えば「ここをクリックで価格を見る」の代わりに「料金プランを見る」のようにします。
- 記事の要約の後に続く「詳細を見る」リンクについては、別の汎用的なフレーズの代わりに、記事自体のタイトルをクリック可能なリンクテキストにすることを検討しましょう。
- アイコンのみのリンク(ソーシャルメディアアイコンなど)については、アイコンのみのボタンの修正と同様に、行き先を説明する
aria-labelを組み合わせましょう。 - 無料のスクリーンリーダー(NVDAとVoiceOverで利用可能)のリンクリスト機能でテストし、各リンクが今では単独で明確で意味のあるものとして読めることを確認しましょう。