An alt attribute must be present on <img>elements.とは
そらよりブログは2018年4月現在WordPressテーマWING(AFFINGER5版)を使用しています。そして各投稿記事の下に「人気ブログランキング」のバナーが表示されるように設定しています。
その設定の際、気になるアラートが表示されたので解決法をシェアします。
アラートが出るところ
アラートが表示される操作手順はこうです。
ダッシュボード「外観」>「ウィジェット」画面で表示される「投稿記事の下に一括表示」に「カスタムHTML」ウィジェットを設置します。
「カスタムHTML」ウィジェットに「人気ブログランキング」の「マイページ」>「リンクバナー・URL」で取得したタグを貼ります。
[1]するとこのようなビックリ(エクスクラメーション)マーク「!」が表示されるのです。
マークをクリックすると[2]「An alt attribute must be present on <img>elements.」という文言が現れます。意訳すると
エレメントにはalt属性が必要です
となります。どんな意味なのでしょう。
画像にはtittle属性とalt属性が
<img>エレメントとは画像のことです。画像をブログに貼り付ける際には一般にtittle属性とalt属性を付与するとよいとされています。Googleが古くから推奨している基本的な設定です。それぞれには以下のような役割があります。
tittle属性:画像の名称
alt属性:画像参照ができないときに画像の代わりに表示される名称(文言)
たとえば前項のキャプチャ画像をもういちどご覧ください。
[3]tittle="人気ブログランキング"とあります。これはつまり画像のタイトルが「人気ブログランキング」であることを定めています。
しかしこのタグには、もしも画像参照ができなくなったとき表示すべき名称のalt属性がどこにもありません。そのため画面には何も表示されなくなります。Googleはこうした状態をよしとしていません。
そのためビックリマーク「!」が表示されるのですね。
じつはこのまま「保存」してもバナーの表示には問題が発生しません。しかしアラートがついたままというのも気持ちがわるい。そこでalt属性をタグに挿入してあげるというのが、僕のおススメする解決法です。
コピペでalt属性を付与
1.タグに設定されているtittle="人気ブログランキング"をコピーします。
2.その記述のすぐ後に半角スペースをとりペーストします。
3.tittleの文字をaltに変えます。
これだけでビックリマーク「!」が消せます。Googleが推奨するタグとなり、ページの評価を下げる心配もなくなりました。
もしも気になっている方がいらっしゃったら、ぜひ見直してみてください。
なおこれはすべての画像に該当することです。
φ(.. )メモメモ
WordPressのダッシュボードでメディアを追加するときは
「タイトル」をコピーし「代替テキスト」にペースト!
「タイトル」はtittle属性、「代替テキスト」はalt属性です。