Alt属性の入っていないIMGタグにalt=””を追加するWordPressカスタマイズ方法

僕は、HTML5のバリデーション(チェック)は、Nu Html Checkerで行っています。

それで、たまたまいろいろページをチェックしていたら、以下のような警告が出ていました。

An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.

An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.

翻訳は以下になります。

img要素は、特定の条件の場合を除き、alt属性を持っている必要があります。詳細については、画像に代替テキストを提供するためのガイダンスを参照してください。

引用 W3C Validation 日本語訳メモ | URAGAMI

img要素にalt属性が指定されていないので、代替テキストとなるAlt属性を指定しなさいということです。

で、警告が出るのは、なんだか気持ち悪いので、Wordpressでの修正方法を考えてみました。

HTML5でAlt属性は、特定の条件の場合を除き、省略することもできるようになっています。ただ、Wordpressで投稿欄に入力するIMGタグの場合、特定条件を満たしていないことが多いので、alt=””を追加します。

スポンサーリンク
レクタングル(大)広告

Alt警告が出ていた原因

Alt属性を指定していないIMGタグの主な原因は、以下でした。

  • ASPのインプレッションカウント用のIMGタグ
  • Amazon商品ツールが出力する商品画像にAlt属性が入っていない

これらは、以下のようなタグで、Alt属性を指定していないことも結構あります。

こういった画像は、以下の条件からalt=””を挿入して、空文字の代替テキストを指定することが推奨されています。(多分)

  • 画像と同等のテキストの隣にあるアイコンやロゴ
  • 前後のテキストを補足しているだけで削除しても問題のない画像
  • 情報として意味のない (情報量のない) 装飾的な画像
  • 複数の画像をつなぎ合わせた場合の最初以外の画像 (最初の画像は代替テキストを指定する)
  • 表示目的でない画像 (アクセスカウント用の width=0, height=0 の画像など)

引用 HTML5: img 要素の alt 属性 の仕様 | attosoft.info

ということで、こういった「表示物として特に意味のない画像」にalt=””を指定すれば、警告も出なくなるかと思います。

ということで、「Alt属性の入っていないIMGタグにalt=””を追加するWordpressカスタマイズ方法」を考えてみました。

IMG要素にAlt属性が入らない原因の1つとして、投稿時の入力し忘れというのも多いかと思います。投稿時には、必要であればAlt属性を指定した方が良いかと思います。今回の方法では、入力し忘れのIMGタグにもalt=””が付加されます。

WordPressのカスタマイズ方法

Alt属性が指定されていない、IMGタグにalt=””を追加するには、テーマ(子テーマ)のfunctions.phpに以下のように書きます。

もっと短くして、このように書いてもOKかと思います。

やっていることは、本文表示をフックして、」Alt属性が入っていないIMGタグ」を正規表現(/<img((?![^>]*alt=)[^>]*)>/i)で判別し、発見されたら、Alt属性が入ったものに置換しているだけです。

動作確認

カスタマイズ後、Nu Html Checkerで、同じページをチェックすると、以下のようにエラーが無くなりました。

Document checking completed. No errors or warnings to show

Document checking completed. No errors or warnings to show.

まとめ

今回のカスタマイズを行うことで得る1番の利点は、「エラーがなくなって気持ちが良い」ということでしょうか。

確かに、(おかしなHTMLを書くよりは)正しいHTMLを書いた方が、SEO的には良いかもしれません。ただ、alt属性を入れ忘れることなんて、どんなサイトでも行っています。なので、こんなことでSEOで差がつくなんてことは、まず考えられません。

逆に、「本文内テキストを正規表現でスキャンして置換する」という作業をサーバープログラム上で行っているので、極極微妙かもしれませんが、処理時間もかかります。

なので、今回のカスタマイズをしたからといって、とりわけの効果はないと思います。

それよりもやっぱり、「エラーのない気持ち良さを得る」という、自己満足の部分が大きいかと思います。