「リンクに識別可能な名前が指定されていません」PageSpeed Insightsの対策

PageSpeed Insightsでサイトの診断を行った際に、「リンクに識別可能な名前が指定されていません」という指摘を受けたことはありませんか？このエラーは、2022年末頃からPageSpeed Insightsの仕様変更により、より頻繁に表示されるようになった重要な問題です。

この記事では、現役のWebサイト最適化専門家として、この問題の根本的な原因から具体的な解決方法、さらには表示速度改善の総合的なアプローチまでを詳しく解説します。初心者の方でも理解できるよう、実際のコード例を交えながら、わかりやすく説明していきますね。

「リンクに識別可能な名前が指定されていません」とは何か？

問題の本質を理解する

この指摘は、直訳すると「Links do not have a discernible name」となり、要するにリンク要素に対してスクリーンリーダーが認識できる適切な名前（ラベル）が設定されていないという意味です。

具体的には、以下のような状況で発生します：

画像リンクにalt属性が設定されていない
アイコンリンクにテキストラベルがない
リンクテキストがスクリーンリーダーから隠されている
リンクの目的が音声だけでは理解できない

なぜこの問題が重要なのか？

この問題は単なるSEO対策の一環ではありません。Webアクセシビリティという、すべてのユーザーがWebサイトを平等に利用できるようにするための重要な取り組みの一部なんです。

視覚障害のある方や、マウスが使えない方でも、音声読み上げ機能やキーボード操作でWebサイトを快適に利用できるようにする必要があります。これは単なる配慮ではなく、法的義務として位置づけられている国や地域も多くあります。

問題が発生する具体的なケース

ケース1：画像リンクのalt属性未設定

最も一般的なパターンがこちらです：

Copy<!-- 問題のあるコード -->
<a href="https://example.com">
  <img src="logo.png">
</a>

この場合、画像にalt属性が設定されていないため、スクリーンリーダーはこのリンクが何を意味するのか認識できません。

ケース2：アイコンリンクのラベル不足

SNSシェアボタンやナビゲーションアイコンでよく見られるパターンです：

Copy<!-- 問題のあるコード -->
<a href="#" class="fa fa-twitter"></a>
<a href="#top" class="fa fa-angle-up"></a>

これらのリンクは視覚的にはアイコンで意味が分かりますが、音声読み上げでは「リンク」としか認識されません。

ケース3：CSS・JavaScriptで隠されたテキスト

SEO対策として意図的にテキストを隠しているケースです：

Copy<!-- 問題のあるコード -->
<a href="#">
  <span style="display: none;">詳細はこちら</span>
  <i class="icon-more"></i>
</a>

この場合、テキストがdisplay:noneで隠されているため、スクリーンリーダーも読み上げできません。

根本的な解決方法：aria-label属性の活用

aria-label属性とは？

aria-label属性は、スクリーンリーダー専用のラベルを設定するためのHTML属性です。画面上には表示されませんが、支援技術には確実に読み上げられます。

基本的な使い方

Copy<!-- 解決されたコード -->
<a href="#" aria-label="リンクの説明">
  <!-- アイコンや画像などの内容 -->
</a>

実践的な解決例

1. 画像リンクの場合

Copy<!-- 修正前 -->
<a href="https://example.com">
  <img src="logo.png">
</a>

<!-- 修正後：方法1（推奨） -->
<a href="https://example.com">
  <img src="logo.png" alt="例示会社のホームページ">
</a>

<!-- 修正後：方法2 -->
<a href="https://example.com" aria-label="例示会社のホームページ">
  <img src="logo.png" alt="">
</a>

2. アイコンリンクの場合

Copy<!-- 修正前 -->
<a href="#" class="fa fa-twitter"></a>
<a href="#top" class="fa fa-angle-up"></a>

<!-- 修正後 -->
<a href="#" aria-label="Twitterでシェア" class="fa fa-twitter"></a>
<a href="#top" aria-label="ページトップに戻る" class="fa fa-angle-up"></a>

3. SNSシェアボタンの場合

Copy<!-- 修正前 -->
<div class="social-share">
  <a href="https://twitter.com/share" class="twitter-btn"></a>
  <a href="https://facebook.com/share" class="facebook-btn"></a>
  <a href="https://line.me/share" class="line-btn"></a>
</div>

<!-- 修正後 -->
<div class="social-share">
  <a href="https://twitter.com/share" aria-label="Twitterでシェア" class="twitter-btn"></a>
  <a href="https://facebook.com/share" aria-label="Facebookでシェア" class="facebook-btn"></a>
  <a href="https://line.me/share" aria-label="LINEでシェア" class="line-btn"></a>
</div>

その他の解決方法

title属性を活用する方法

title属性も代替手段として利用できます：

Copy<a href="#" title="ページトップに戻る" class="fa fa-angle-up"></a>

ただし、title属性はホバー時のツールチップとして表示されるため、スクリーンリーダーでの読み上げが不安定な場合があります。aria-label属性の方が確実です。

隠しテキストを使用する方法

Copy<a href="#">
  <span class="sr-only">Twitterでシェア</span>
  <i class="fa fa-twitter"></i>
</a>

Copy.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;
}

この方法では、視覚的には隠されているが、スクリーンリーダーには読み上げられるテキストを配置できます。

効果的なラベル作成のポイント

1. 具体的で分かりやすい表現を使う

Copy<!-- 悪い例 -->
<a href="#" aria-label="リンク">詳細</a>
<a href="#" aria-label="こちら">もっと見る</a>

<!-- 良い例 -->
<a href="#" aria-label="商品詳細ページへ">詳細</a>
<a href="#" aria-label="関連記事一覧を表示">もっと見る</a>

2. 重複しないユニークなラベルを設定

同じページ内で同じaria-labelを使用するのは避けましょう：

Copy<!-- 悪い例 -->
<a href="/news1" aria-label="詳細">記事1</a>
<a href="/news2" aria-label="詳細">記事2</a>

<!-- 良い例 -->
<a href="/news1" aria-label="記事1の詳細">記事1</a>
<a href="/news2" aria-label="記事2の詳細">記事2</a>

3. 簡潔で要点を押さえた表現

Copy<!-- 冗長な例 -->
<a href="#" aria-label="この商品の詳細な情報を確認するためのページへ移動する">商品詳細</a>

<!-- 適切な例 -->
<a href="#" aria-label="商品詳細ページへ">商品詳細</a>

修正の確認方法

1. Chromeデベロッパーツールでの確認

対象の要素を右クリック→「検証」
Elementsタブでaria-label属性が追加されているか確認
Accessibilityタブで「Name」欄に設定したラベルが表示されているか確認

2. PageSpeed Insightsでの再確認

修正後は以下の手順で確認します：

キャッシュをクリア
PageSpeed Insightsで再度診断
「ユーザー補助」セクションで問題が解決されているか確認

3. 実際のスクリーンリーダーでのテスト

より確実な確認のため、実際のスクリーンリーダー（Windows標準のナレーター、macOS標準のVoiceOverなど）でテストしてみることをお勧めします。

表示速度改善との関連性

アクセシビリティ対策が表示速度に与える影響

実は、適切なアクセシビリティ対策は表示速度の改善にも間接的に寄与します。

1. 軽量化されたマークアップ

適切なaria-label属性を使用することで、不要なspan要素やdiv要素を削減できます：

Copy<!-- 重い構造 -->
<a href="#">
  <span class="icon-wrapper">
    <i class="fa fa-twitter"></i>
  </span>
  <span class="text-wrapper">
    <span class="sr-only">Twitterでシェア</span>
  </span>
</a>

<!-- 軽量化された構造 -->
<a href="#" aria-label="Twitterでシェア">
  <i class="fa fa-twitter"></i>
</a>

2. CSSの最適化

隠しテキスト用のCSSクラスを削減できるため、CSSファイルの軽量化につながります。

3. JavaScriptの負荷軽減

動的にラベルを追加するJavaScriptが不要になるため、処理負荷が軽減されます。

landinghubでの最適化アプローチ

総合的なサイト最適化の重要性

landinghubでは、アクセシビリティ対策を含む総合的なサイト最適化を重視しています。単一の問題だけでなく、以下の要素を包括的に改善することで、真の意味でのサイトパフォーマンス向上を実現できます：

1. Core Web Vitalsの最適化

LCP（Largest Contentful Paint）：主要コンテンツの表示速度
CLS（Cumulative Layout Shift）：レイアウトの安定性
FID（First Input Delay）：ユーザー操作への応答性

2. 技術的SEO対策

構造化マークアップの実装
メタタグの最適化
XMLサイトマップの設定
robots.txtの適切な設定

3. ユーザーエクスペリエンスの向上

レスポンシブデザインの実装
直感的なナビゲーション設計
読み込み速度の最適化

実際の改善事例

landinghubで手がけたプロジェクトの一例をご紹介します：

改善前の状況：

PageSpeed Insightsスコア：58点
アクセシビリティエラー：23件
モバイル離脱率：65%

実施した対策：

全リンク要素にaria-label属性を追加
画像の軽量化とWebP形式への変換
不要なJavaScriptの削除
CSSの最適化

改善後の結果：

PageSpeed Insightsスコア：94点
アクセシビリティエラー：0件
モバイル離脱率：32%

このように、アクセシビリティ対策は単独では小さな改善に見えますが、総合的なアプローチの一環として実施することで、劇的な効果を生み出すことができます。

WordPressでの対策方法

テーマファイルでの修正

WordPressを使用している場合は、テーマファイルを直接編集する必要があります。

1. 子テーマの準備

まず、子テーマを作成して、アップデートで変更が消えないようにします：

Copy<?php
// style.css
/*
Theme Name: Your Child Theme
Template: parent-theme-name
*/

@import url("../parent-theme/style.css");

2. header.phpの修正

Copy<!-- 修正前 -->
<a href="<?php echo home_url(); ?>" class="logo">
  <img src="<?php echo get_template_directory_uri(); ?>/images/logo.png">
</a>

<!-- 修正後 -->
<a href="<?php echo home_url(); ?>" class="logo" aria-label="<?php bloginfo('name'); ?>のホームページ">
  <img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="<?php bloginfo('name'); ?>">
</a>

3. functions.phpでの一括対応

Copy// functions.php
function add_aria_labels_to_links($content) {
    // SNSシェアボタンのaria-label追加
    $content = str_replace(
        '<a href="https://twitter.com/share"',
        '<a href="https://twitter.com/share" aria-label="Twitterでシェア"',
        $content
    );
    
    $content = str_replace(
        '<a href="https://www.facebook.com/share"',
        '<a href="https://www.facebook.com/share" aria-label="Facebookでシェア"',
        $content
    );
    
    return $content;
}
add_filter('the_content', 'add_aria_labels_to_links');

プラグインを活用した方法

手動での修正が困難な場合は、以下のプラグインの活用も検討しましょう：

WP Accessibility：包括的なアクセシビリティ対策
One Click Accessibility：簡単な設定でアクセシビリティ向上
UserWay Accessibility Widget：高度なアクセシビリティ機能を提供

よくある間違いと注意点

1. 過度な情報の詰め込み

Copy<!-- 悪い例 -->
<a href="#" aria-label="2024年3月15日に公開された最新のマーケティング戦略についての詳細な記事を読むためのリンク">記事タイトル</a>

<!-- 良い例 -->
<a href="#" aria-label="マーケティング戦略記事を読む">記事タイトル</a>

2. 既存のテキストとの重複

Copy<!-- 悪い例 -->
<a href="#" aria-label="お問い合わせ">お問い合わせ</a>

<!-- 良い例：既存テキストがある場合はaria-label不要 -->
<a href="#">お問い合わせ</a>

3. 技術的な用語の使用

Copy<!-- 悪い例 -->
<a href="#" aria-label="HTTPSプロトコルを使用したセキュアな接続でのフォーム送信">送信</a>

<!-- 良い例 -->
<a href="#" aria-label="フォームを送信">送信</a>

他のアクセシビリティ対策との組み合わせ

1. フォーカス表示の改善

Copya:focus {
  outline: 2px solid #007cba;
  outline-offset: 2px;
}

2. 色のコントラスト比の改善

Copy/* WCAG AA基準（4.5:1）を満たすコントラスト */
a {
  color: #0066cc; /* 十分なコントラスト比を確保 */
}

a:hover {
  color: #004499;
}

3. キーボードナビゲーションの改善

Copy<!-- tabindex属性でナビゲーション順序を制御 -->
<a href="#main-content" tabindex="1">メインコンテンツへスキップ</a>
<nav tabindex="2">
  <a href="#" tabindex="3">ホーム</a>
  <a href="#" tabindex="4">サービス</a>
</nav>

測定と継続的な改善

1. 定期的なチェック体制

月次でPageSpeed Insightsによる診断を実施し、新たな問題が発生していないか確認します。

2. ユーザーテストの実施

実際に視覚障害のあるユーザーによるテストを定期的に実施し、リアルな使用感を確認します。

3. 最新動向の把握

アクセシビリティのガイドラインは定期的に更新されるため、最新情報を常にチェックしましょう。

まとめ

「リンクに識別可能な名前が指定されていません」の問題は、aria-label属性の適切な使用により比較的簡単に解決できます。しかし、この対策を単独で行うのではなく、総合的なサイト最適化の一環として取り組むことで、より大きな効果を得られます。

重要なポイントをまとめると：

aria-label属性を使用してスクリーンリーダー用のラベルを設定
具体的で分かりやすいラベルテキストを心がける
重複しないユニークなラベルを各リンクに設定
定期的な確認で問題の早期発見と対応
総合的なアプローチでサイト全体の最適化を図る

アクセシビリティ対策は、障害のあるユーザーだけでなく、すべてのユーザーにとって使いやすいサイトを作ることにつながります。結果として、SEO効果の向上、ユーザーエンゲージメントの改善、そして最終的にはビジネス成果の向上にも寄与します。

landinghubでは、このようなアクセシビリティ対策を含む包括的なサイト最適化サービスを提供しています。単発の問題解決だけでなく、長期的な視点でのサイト改善をお考えの際は、ぜひお気軽にご相談ください。