Googleが提供するサイト診断ツールである「PageSpeed Insights」の診断結果に「リンクに識別可能な名前が指定されていません」が出る場合の解決策です。
当サイトでは、画面右下に表示している「ページトップに戻る」のボタン部分にこの診断が出ていましたが、無事に対処できたので記事にします。
対処方法は簡単で、問題が指摘されているリンク（<a>タグ）内にaria-labelを使ってラベルを付けてあげれば解決します。
この記事の目次
リンクに識別可能な名前が指定されていませんの対処法
2022年末ごろ？に「PageSpeed Insights」の仕様が変更されたことで、サイトの問題が以前よりも細かく指摘されるようになりました。
早速当サイトの記事ページを新しくなったPSIでチェックすると、ユーザー補助という項目で「リンクに識別可能な名前が指定されていません」という問題が確認できたので改善しました。簡単に解決できたので当記事でこの問題の対処法をご紹介します。
実際に当サイトをPageSpeed Insightsで診断した時の結果画面が以下です。
PageSpeed Insightsで当サイトを診断した結果
識別可能、フォーカス可能な一意のリンクテキスト (および画像をリンクとして使用している場合はその代替テキスト) を使用すると、スクリーン リーダーでのナビゲーションの操作性が向上します。
とあります。
何について怒られているのか？問題点を詳しく見ていきましょう。
指摘内容はスクリーンリーダーへの対応
“リンクに識別可能な名前が指定されていません”とありますが、この指摘は要するにスクリーンリーダー（画面読み上げ機能）を使う時に読み上げるべき内容（ラベル）がありませんよ！という指摘です。
識別可能な名前が指定されていない要素はスクリーンリーダーに無視されてしまう（読み上げられない）ので、聴覚だけではサイト内の何のパーツか分かりません。
これがPSIのユーザー補助の項目で指摘される理由です。
視覚”ではなく、聴覚に関するサイトのユーザービリティ向上が今回の内容です。
問題の要素は「ページトップに戻る」ボタン
当サイトでは「ページトップに戻る」ボタンに問題がありました。
“リンクに識別可能な名前が指定されていません”は、特にボタンリンク（<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を編集したら各キャッシュをクリアして確認してみます。
Nameが表示されればOK
今回指摘されている要素をChromeのデベロッパーツールで検証してみると、ACCESSIBILITYのNameに“トップに戻る”というラベルが付いたことが分かります。
関連記事
デベロッパーツールの簡単な使い方はコチラ
Webページに使われているCSSやHTMLをブラウザで確認する方法！Chrome、Edge、Firefoxの開発ツール。
続いて、肝心のPageSpeed Insightsの方も確認してみます。
PageSpeed Insights
OKですね！
今回の作業がSEOにどの程度影響するのかは分かりませんが、少なくともマイナスに働くようなことはないはずなので、ぜひ当記事を参考に対処してみて下さい！
まとめ
以上、PageSpeed Insightsで“リンクに識別可能な名前が指定されていません”が出た時の対処法でした。
該当する要素にaria-label属性を追加するだけで解決できる内容ではありますが、WordPressなんかだと、どのテンプレート（.php）がどの要素を出力しているのかが分からないと難しいかもしれません...。
最後にスクリーンリーダーを使って検証してみたのですが、今回はボタンに疑似要素（Webアイコン）を使っていたためか、上手く読み上げてもらえませんでした...
要素の所には一応フォーカスするのですが、Webアイコンはテキスト読み上げと相性が悪いみたいです...。とりあえず今回はPageSpeed Insightsのユーザー補助の点数が伸びたので良しとしておきます・ｗ・
