※当サイトにはプロモーションが含まれています。
にゃのらいと ページスピードインサイトで確認したら、ユーザー補助の項目で「リンクに識別可能な名前が指定されていません」と表示されたにゃ
ページスピードインサイトを使って、自分のサイトのパフォーマンスを測定している人もいるかと思います。
ページスピードインサイトでは、パフォーマンス、ユーザー補助、おすすめの方法、SEOについて、どれだけ最適化されているかを測定することができます。
今回、ユーザー補助の項目で、ワードプレステーマの「賢威」のデフォルト設定で表示される「Ｘ（旧Twitter）ボタン」が、リンクに識別可能な名前が指定されていませんと表示されるので、修正することにしました。
なお、賢威のバージョンは、 8.0.1.13（Twitterのアイコンが、Xに変更になったアップデート）です。
Ｘ（旧Twitter）ボタンに、aria-labelを付与する方法
ページスピードインサイトの警告（アドバイス）では、“識別可能な名前が指定されていない”とのことなので、aria-labelを使用して、名称を指定したいと思います。
aria-label 属性は、スクリーンリーダーなどの支援技術に対して要素の目的を明確に伝えるためのラベルを指定するHTML属性です。視覚的なテキストがない場合や、代替テキストを提供する必要がある場合に使用されます。
この変更は、親テーマに手を加えるので、修正する際は必ずバックアップを取るようにしてください。
また、親テーマをアップデートした際には、この修正箇所は上書きされてしまうのでご留意ください。
※本来であれば、親テーマにあるファイルは修正せずに、function.phpの修正で解決したかったのですが、自分の力量では無理でした･･･。
①親テーマにあるutility.jsをダウンロードする
親テーマにあるutility.jsをダウンロードします。
なお、utility.jsのファイルは、下記のフォルダに格納されていると思います。
/home/（あなたが契約した名前）/www/（あなたが作成したフォルダ名）/wp-content/themes/keni80_wp_standard_all_202411021815/js/
※通常、賢威の親テーマは「keni80_wp_standard_all_（日付＋時間）」という形式になっています
②utility.jsの内容を編集する
utility.jsの596行目付近に記載されている
$(this).append('<a target="_blank" href="https://x.com/intent/post?url=' + target_url + '&text=' + target_title + '"><i class="fa-brands fa-x-twitter" aria-hidden="true"></i><span></span></a>');のコード内にある<a>タグに対して、
aria-label="エックスで共有"を追加します。
つまり、下記のようになります。
$(this).append('<a target="_blank" href="https://x.com/intent/post?url=' + target_url + '&text=' + target_title + '" aria-label="エックスで共有"><i class="fa-brands fa-x-twitter" aria-hidden="true"></i><span></span></a>');実際のコードを見ると、こんな感じになります。
なお、上記では、//（半角スラッシュ）を２つ記載して、元のコードをコメントアウト（無効化）して記述しました。
③修正したutility.jsをアップロードする
コードを追加した、utility.jsを親テーマにアップロードして上書きすれば終了です。
無事、aria-labelが付与されました。
もちろん、スピードインサイトでも、「リンクに識別可能な名前が指定されていません」の表示がされなくなりました。
なお、親テーマのファイルが書き換えられてしまうので、オリジナルファイルは必ずバックアップをとるようにしてください。
ご支援のお願い
この記事が役に立ったと感じたら･･･
この記事が少しでもお役に立ったと感じていただけましたら、ぜひ下のリンクからお買い物をしていただけると幸いです。
ご購入いただいた金額の一部（1～3％程度）が私に入り、より多くの有益な記事を作るための励みになります。
下記のリンクを通じて、Amazonや楽天でお買い物いただけると嬉しいです。