「リンクに識別可能な名前が指定されていません」は、PageSpeed InsightsやLighthouseで頻出するアクセシビリティ系の指摘です。要するに、ユーザーやスクリーンリーダーが「このリンクは何をするのか」を理解できない状態を意味します。リンクテキストが空だったり、「こちら」「詳しくはこちら」といった曖昧な文言だけだったり、画像リンクにaltが無いと、この警告が出やすくなります。見た目の調整を優先してしまうと陥りがちなポイントですが、少しの修正でユーザビリティも評価も改善できます。
なぜ重要か
- 視覚に依存しないユーザー体験の確保: スクリーンリーダーはリンクの「アクセス可能な名前」を頼りに目的を伝えます。名前がなければ、「リンク」としか読まれません。
- SEOと回遊性の向上: 意味のあるアンカーテキストは検索エンジンにも文脈を与え、内部リンクの評価やコンテンツ理解に貢献します。
- 品質の一貫性: デザイン変更や言語切り替えでも、アクセシブルネームの設計があれば崩れません。
よくある原因
- aタグの中身がアイコンのみでテキストがない
- 画像リンクのalt属性が未設定
- 「こちら」「詳細」など文脈に依存する曖昧なテキストのみ
- CSSでテキストを非表示にして、代わりのラベルを用意していない
- title属性だけで代用しようとする（支援技術で読まれない場合がある）
修正アプローチの基本
- 原則は「リンク自体に意味のあるテキストを置く」
- どうしても視覚上テキストを置けない場合は、aria-labelやaria-labelledbyで代替
- 画像リンクはaltで機能（目的）を明確化
- アイコンリンクはラベル必須。視覚的にはアイコンのままでOK
1. テキストリンクの場合
最も確実なのは、アンカーテキストを具体的にすることです。リンク先の目的や結果を1フレーズで伝えます。
例:
<!-- 修正前 -->
<a href="/about-us.html">[詳細を見る]</a>
<!–- 修正後 –->
<a href=”/about-us.html”>当社の詳細を見る</a>
もし既存デザインや文面上どうしても「こちら」を使うなら、aria-labelで具体化します。
例:
<!-- 修正前 -->
<a href="/about-us.html">こちら</a>
<!–- 修正後 -–>
<a href=”/about-us.html” aria-label=”当社の詳細を見る”>こちら</a>
ポイント
- aria-labelは視覚上のテキストよりも優先されて読み上げられます。ユーザーに見える文言と矛盾しないよう整合性を保ちましょう。
- 同一ページ内で同じ「こちら」を乱発しない。リンクごとに目的が分かる文言へ。
2. 画像リンクの場合
画像がリンクになっている場合、altは「画像の説明」ではなく「リンクの機能」を伝えるのが原則です。
例:
<!-- 修正前 -->
<a href="/contact.html"><img src="contact-icon.png"></a>
<!–- 修正後 -–>
<a href="/contact.html">
<img src="contact-icon.png" alt="お問い合わせページへ移動">
</a>
ポイント
- 装飾目的の画像はalt=””（空）でOKですが、リンクになっているなら必ず機能を記述します。
- altは短く、行き先やアクションが分かるように。「クリック」などの操作語は不要です。
3. アイコンのみのリンクの場合
フォントアイコンやSVGだけのリンクは、視覚上は伝わっても支援技術には沈黙です。aria-labelを付与しましょう。
例:
<!-- 修正前 -->
<a href="/"><i class="fa fa-home"></i></a>
<!–- 修正後 -–>
<a href="/" aria-label="ホーム画面に戻る"><i class="fa fa-home" aria-hidden="true"></i></a>
応用: 複数要素でラベルを共有するならaria-labelledbyも有効です。
<a href="/" aria-labelledby="home-text">
<i class="fa fa-home" aria-hidden="true"></i>
<span id="home-text" class="sr-only">ホーム画面に戻る</span>
</a>
スクリーンリーダー専用テキストを非表示にするCSSの一例:
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0);
white-space: nowrap; border: 0;
}
実装時のベストプラクティス
- 一貫性: 同じ機能のリンクは同じラベルに。異なる機能は別のラベルに。
- 冗長回避: 見えるテキストが十分に具体的なら、むやみにaria-labelを重ねない（読み上げが冗長になる）。
- title属性に依存しない: ホバーが前提で、読み上げられないケースがある。
- コンテキスト依存の排除: 「こちら」「詳細」「もっと見る」単体は避け、何の詳細かを含める。
- 多言語対応: 言語切替時はaltやaria-labelも翻訳する。lang属性やhreflangと併用で整合性を保つ。
- コンポーネント化: デザインシステムに「ラベル必須」の規約を組み込み、レビュー時に静的チェックを行う。
チェックリスト
- キーボードだけでTab移動し、各リンクの目的が分かるか
- スクリーンリーダー（例: NVDA/VoiceOver）でリンク名が期待通りか
- アイコンリンクにaria-labelまたはaria-labelledbyがあるか
- 画像リンクに適切なaltがあるか（機能中心の文言か）
- 同一ページに同文言のリンクが多発していないか
- 見出しや周辺文脈なしでも、リンク単体で意味が通るか
よくある落とし穴
- CSSでテキストをdisplay:noneにしてラベル代わりにする → 読み上げからも消える場合があるため、sr-onlyパターンを使う
- 同一リンク内にテキストとaria-labelの両方を入れて内容が矛盾 → どちらか一方に統一
- 画像のファイル名をそのままaltにする → 機能が伝わらない
まとめ
「リンクに識別可能な名前が指定されていません」は、PageSpeed InsightsやLighthouseで頻出するアクセシビリティ系の指摘です。要するに、ユーザーやスクリーンリーダーが「このリンクは何をするのか」を理解できない状態を意味します。リンクテキストが空だったり、「こちら」「詳しくはこちら」といった曖昧な文言だけだったり、画像リンクにaltが無いと、この警告が出やすくなります。見た目の調整を優先してしまうと陥りがちなポイントですが、少しの修正でユーザビリティも評価も改善できます。