「リンクに識別可能な名前が指定されていません」が出る時の対処法。

リンクに識別可能な名前が指定されていません-PageSpeed Insights_eyecatch

Googleが提供するサイト診断ツールである「PageSpeed Insights」の診断結果に「リンクに識別可能な名前が指定されていません」が出る場合の解決策です。

当サイトでは、画面右下に表示している「ページトップに戻る」のボタン部分にこの診断が出ていましたが、無事に対処できたので記事にします。

対処方法は簡単で、問題が指摘されているリンク(<a>タグ)内にaria-labelを使ってラベルを付けてあげれば解決します。

目的はリンク要素にラベルを指定し、スクリーンリーダーに対応する事です。

リンクに識別可能な名前が指定されていませんの対処法

2022年末ごろ?に「PageSpeed Insights」の仕様が変更されたことで、サイトの問題が以前よりも細かく指摘されるようになりました。

早速当サイトの記事ページを新しくなったPSIでチェックすると、ユーザー補助という項目で「リンクに識別可能な名前が指定されていません」という問題が確認できたので改善しました。簡単に解決できたので当記事でこの問題の対処法をご紹介します。

実際に当サイトをPageSpeed Insightsで診断した時の結果画面が以下です。

リンクに識別可能な名前が指定されていません-PageSpeed Insights_001

PageSpeed Insightsで当サイトを診断した結果

リンクに識別可能な名前が指定されていません
識別可能、フォーカス可能な一意のリンクテキスト (および画像をリンクとして使用している場合はその代替テキスト) を使用すると、スクリーン リーダーでのナビゲーションの操作性が向上します。

とあります。

何について怒られているのか?問題点を詳しく見ていきましょう。

指摘内容はスクリーンリーダーへの対応

“リンクに識別可能な名前が指定されていません”とありますが、この指摘は要するにスクリーンリーダー(画面読み上げ機能)を使う時に読み上げるべき内容(ラベル)がありませんよ!という指摘です。

識別可能な名前が指定されていない要素はスクリーンリーダーに無視されてしまう(読み上げられない)ので、聴覚だけではサイト内の何のパーツか分かりません。
これがPSIのユーザー補助の項目で指摘される理由です。

視覚”ではなく、聴覚に関するサイトのユーザービリティ向上が今回の内容です。

リンクに識別可能な名前が指定されていません-PageSpeed Insights_002

問題の要素は「ページトップに戻る」ボタン

当サイトでは「ページトップに戻る」ボタンに問題がありました。

“リンクに識別可能な名前が指定されていません”は、特にボタンリンク(<a>タグ)にラベルを指定していない場合に出るようです。

では早速対処していきましょう。

スポンサーリンク

対処法:aria-labelで要素にラベルを指定する

「リンクに識別可能な名前が指定されていません」の対処方法はいたって簡単で、PageSpeed Insightsで指摘されている要素にaria-labelという属性を使ってラベルを指定すればOKです。

シンプルに書くと、

<a href="#" aria-label="ここにラベルの内容(リンクの説明)"></a>

というような構造にすればOKです。

この対処方法はPageSpeed Insights内の説明から開けるページ(↓)にもあります。
かなり詳しく書かれているので気になる方は参考にしましょう!

当サイトを一例にするなら「トップに戻る」ボタンは以下のHTMLなので...

<!-- 変更前のコード -->
<a href="#wrapper" class="fa fa-angle-up">

ここにaria-label="トップに戻る"を追加して対処しました(↓)。

<!-- 変更後のコード -->
<a href="#wrapper" aria-label="トップに戻る" class="fa fa-angle-up"></a>

こんな感じで<a>タグ内にaria-label="xxx"を追記するだけでOKです。

ポイント

「aria-label」属性は<a>~</a>の中ならどこでも良いので、既存の「target="xxx"」や「rel="xxx"」の前後に記述しても大丈夫です。

aria-label属性を使ってラベルを指定しておくことで、その中身がスクリーンリーダーで優先的に読み上げられるようになります。

当サイトではシェアボタンにも同じ問題があったので修正しておきました。

要素にラベルが付与されているか確認する

HTMLを編集したら各キャッシュをクリアして確認してみます。

リンクに識別可能な名前が指定されていません-PageSpeed Insights_003

Nameが表示されればOK

今回指摘されている要素をChromeのデベロッパーツールで検証してみると、ACCESSIBILITYのNameに“トップに戻る”というラベルが付いたことが分かります。

続いて、肝心のPageSpeed Insightsの方も確認してみます。

PageSpeed Insights

リンクに識別可能な名前が指定されていません-PageSpeed Insights_004

リンクに識別可能な名前が指定されています

OKですね!

今回の作業がSEOにどの程度影響するのかは分かりませんが、少なくともマイナスに働くようなことはないはずなので、ぜひ当記事を参考に対処してみて下さい!



まとめ

以上、PageSpeed Insightsで“リンクに識別可能な名前が指定されていません”が出た時の対処法でした。

該当する要素にaria-label属性を追加するだけで解決できる内容ではありますが、WordPressなんかだと、どのテンプレート(.php)がどの要素を出力しているのかが分からないと難しいかもしれません...。

最後にスクリーンリーダーを使って検証してみたのですが、今回はボタンに疑似要素(Webアイコン)を使っていたためか、上手く読み上げてもらえませんでした...

要素の所には一応フォーカスするのですが、Webアイコンはテキスト読み上げと相性が悪いみたいです...。とりあえず今回はPageSpeed Insightsのユーザー補助の点数が伸びたので良しとしておきます・w・

-サイト構築
-,

site-logo
ありがとうございました!
良かったらシェアしてネ・w・
当サイトはピンバックを受け付けます。

© 2023 ソロ学