Accessibility
Guidelines

2.4.4 リンクの目的を理解できるようにする

リンクテキストや前後の文脈から、リンク先や目的がわかるようにする。リンクテキストだけを一覧化して表示する支援技術を考慮し、リンクテキストのみでリンク先の目的がわかると更に良い。

詳細

この項目の目的は、ユーザーがリンク先へ行きたいかどうかを判断しやすくすることである。理解しやすいリンクテキストにすることで、一度リンク先のページに行き、また戻ってくるという無駄な操作を減らすことができる。

リンクテキストのみでリンク先の目的を理解できることが一番良いが、冗長になる場合などは、リンクテキストの前方に説明を加える形でも良い。ベストプラクティスは、同じリンク先のリンクには一貫した説明があることである(関連:3.2.4 一貫した識別性を持たせる)。

2.4.9リンクの目的(リンクのみ)では、前後の文脈を含めずに、リンクのみでリンクの目的を理解できることが望ましいとされている。

特に恩恵を受けるケース

  • 関心のないリンクテキストをスキップできるようになり、一度リンク先に遷移して戻ってくるという無駄な操作をしなくて済む
  • スクリーンリーダーなどの支援技術を利用しているユーザーは、リンクのみを一覧化してコンテンツを読み飛ばして使うことがある
  • クローラーはリンク先とリンクテキストのキーワードを関連づけて評価を行うことがある

具体例

新着記事一覧モジュールに付随する「もっと見る」というテキストリンク。次のような対応方法が考えられる

  • 「新着記事をもっと見る」など、目的語を含める
  • 補足する文章を近くに置く(リンクより前が望ましい)
  • aria-label属性で、スクリーンリーダーによる読み上げを補足する
  • 新着記事一覧のリンクのOK例
    Good モジュールの下部に、「人気記事をもっと見る」のように、モジュール名を含めた続きを促すリンクテキストがある構成。モジュールが複数あっても、リンクを一覧化した時にどのモジュールの続きを促すリンクなのかが把握できる。
  • 新着記事一覧のリンクのNG例
    Bad モジュールの下部に「もっと見る」というリンクテキストがある構成。こういったモジュールが複数ある場合、リンクを一覧化すると、「もっと見る」が並び、ユーザーは何の続きが表示されるリンクなのかがわからない。

テスト・チェック方法

下記の段階で、リンクテキストが適切か確認する

  • 企画時
  • デザインレビュー
  • 実装後

参考文献