Googleが提供するサイト診断ツールである「PageSpeed Insights」の診断結果に「リンクに識別可能な名前が指定されていません」が出る場合の解決策です。
当サイトでは、画面右下に表示している「ページトップに戻る」のボタン部分にこの診断が出ていましたが、無事に対処できたので記事にします。
対処方法は簡単で、問題が指摘されているリンク（<a>タグ）内にaria-label属性を使ってラベルを付けてあげれば解決します。
目的はリンク要素にラベルを指定し、スクリーンリーダーに対応する事です。
この記事の目次
リンクに識別可能な名前が指定されていませんの対処法
2022年末ごろ？に「PageSpeed Insights」の仕様が変更されたことで、サイトの問題が以前よりも細かく指摘されるようになりました。
早速当サイトの記事ページを新しくなったPSIでチェックすると、ユーザー補助という項目で「リンクに識別可能な名前が指定されていません」という問題が確認できたので改善しました。簡単に解決できたので当記事でこの問題の対処法をご紹介します。
実際に当サイトをPageSpeed Insightsで診断した時の結果画面が以下です。
PageSpeed Insightsで当サイトを診断した結果
リンクに識別可能な名前が指定されていません
識別可能、フォーカス可能な一意のリンクテキスト (および画像をリンクとして使用している場合はその代替テキスト) を使用すると、スクリーン リーダーでのナビゲーションの操作性が向上します。
とあります。
これは視覚ではなく、聴覚に関するサイトのユーザービリティ向上が目的です。
では、何について怒られているのか？問題点を詳しく見ていきましょう。
指摘内容はスクリーンリーダーへの対応
“リンクに識別可能な名前が指定されていません”とありますが、この指摘は要するにスクリーンリーダー（画面読み上げ）を使った時に、対象の要素（サイトパーツ）に読み上げできる内容（ラベル）がありませんよ！という指摘です。
具体的には以下のような要素がページ内にあればこの指摘が出ます。
- リンク（<a>タグ内）を画像やアイコンにしており、ラベルも無い場合
（画像リンクの場合はalt属性が入ってなかったり、高さが0になっている等） - リンクテキストをスクリーンリーダーから非表示にしている場合
（CSSのdisplay:noneや、HTMLのaria-hidden="true"で隠している場合） - リンクテキストがスクリーンリーダーに認識されなくなっている場合
（リンクにフォーカスできない仕様、ラベルが重複している等）
下２つはあくまでも「テキストリンク」である場合に限りなのでお間違えなく。
ポイント
「識別可能な名前」とは、スクリーンリーダーで認識できる一意のラベルです。
つまりページ内で重複しておらず、尚且つ音声読み上げできるリンクの意味。
またキーボードの「Tab」キーで選択できる（フォーカスできる）、主にリンクなどの要素は基本的にスクリーンリーダーで読み上げられる要素です。
識別可能な名前が指定されていない要素はスクリーンリーダーに無視されてしまう（読み上げられない）ので、聴覚だけではサイト内の何のパーツか分かりません。
これがPageSpeed Insightsのユーザー補助の項目で指摘される理由です。
読み上げできるリンク（各aタグ）
または、
読み上げされるべきリンク（ボタンや入力フォームなど）
なのに「読み上げるテキストが無い」か「リーダーに認識されない」のが問題です。
リンクは読み上げ"だけ"でも識別できるべき
特にこの指摘が出やすい要素は、リンクを画像やアイコンにしている場合です。
<a href="https://example.com"> <img src="https://example.com/image.jpg"> </a>
この場合、リンクの画像を見ないと何のリンクなのか分かりません。
画像にもaltタグ（音声読み上げできる）を使ったテキストが入っておらず、読み上げできないので“スクリーンリーダーで識別できない要素”になりダメ！という具合。
問題の要素は「ページトップに戻る」ボタン
当サイトでは「ページトップに戻る」ボタンに問題がありました。
このように“リンクに識別可能な名前が指定されていません”は、特にボタンや画像を使っているリンク（<a>タグ）内にラベルを指定していない場合に出ます。
また本来はリーダーの読み上げ対象であるリンクテキストを、CSSのdisplay:noneや、HTMLのaria-hidden属性で読み上げ不可能な状態にしている場合にも出ます。
この場合は、対象の要素から問題のCSSや属性を外すだけで対処完了です。
当サイトは前者のパターンなので、Webアイコンにラベルを追加して対処します。
対処法：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のユーザー補助の点数が伸びたので良しとしておきます・ｗ・
