PageSpeed Insightsのチェックで検出された問題点リンクに識別可能な名前が指定されていませんの解決方法についてです。
▶ PageSpeed Insightshttps://pagespeed.web.dev/
![ユーザー補助](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-10-31-10-30-40-935-1024x576.jpg)
![画像リンク代用テキスト](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-10-31-10-09-15-666-1024x576.jpg)
PageSpeed Insightsのユーザー補助の項目で検出された問題点の解決です。
リンクには識別可能な名前がありません。
aria-label属性を付ける事で問題解決する事ができます。
aria-label属性はリンク先の説明文を意味していて、画面には表示させずに支援技術に対してのみラベルを設定しておきたい場合に利用可能。
<a href="#" aria-label="トップに戻る"></a>
当サイトで、ツイッターのリンク先、解決する書き方をすると下記の通りになります。
<a href="https://twitter.com/Yu48551968" aria-label="Twitter" target="_blank" rel="noopener"></a>
aria-label属性にどこのリンク先なのかを定義することでアクセシビリティ対応できます。
当サイトの対策例
SNS先は「Twitter」「CodePen」「Instagram」「TikTok」「Pinterest」「お問い合わせページ」となっています。
![SNSリンク](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-10-31-10-51-36-103-1024x576.jpg)
▪定義例⇩
aria-label="Twitter" //ツイッター
aria-label="CodePen" //コードペン
aria-label="Instagram" //インスタ
aria-label="TikTok" //ティックトック
aria-label="Pinterest" //ピンタレスト
aria-label="inquire of" //お問い合わせフォーム
どこのSNSリンク先なのかを定義していて、有料テーマを使っている方は子テーマに記述して対応します。
▪子テーマについては下記で詳しく解説しています⇩
リンクはクロールできません
![SEO](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-11-01-09-15-26-111-1024x576.jpg)
SEOの項目でのパフォーマンス向上で当サイトではaタグ(アンカー要素)hrefが設定されていなかったので対応しました。
![aタグ](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-11-01-09-15-53-326-1024x576.jpg)
functions.phpにaタグのみで(アンカー要素)hrefが設定されていない箇所があります。
![aタグのみ](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-11-01-09-45-34-662-1024x576.jpg)
(アンカー要素)hrefを追加し、cssを個別で適用される為にclassを追加し更新します。
<a href="#" class="current_location">
![hrefを追加](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-11-01-09-56-18-909-1024x576.jpg)
後は、ファイル更新をクリックし再度PageSpeed Insightsで確認するとトップページのみSEO100%にすることができました。
![SEO100%](https://design-pull.com/wp-content/uploads/2022/10/bandicam-2022-11-01-09-18-18-835-1024x576.jpg)