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.

翻訳は以下になります。

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

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

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

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

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

Alt警告が出ていた原因

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

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

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

<img src="http://.." width="1" height="1">
<img src="https://images-fe.ssl-images-amazon.com/images/I/XXXXXXXX._SL160_.jpg">

こういった画像は、以下の条件から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に以下のように書きます。

//Alt属性がないIMGタグにalt=""を追加する
function non_alt_fix($content){
  $content = preg_replace('/<img((?![^>]*alt=)[^>]*)>/i', '<img alt=""${1}>', $content);
  return $content;
}
add_filter('the_content', 'non_alt_fix');

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

//Alt属性がないIMGタグにalt=""を追加する
add_filter('the_content',function($content){
 return preg_replace('/<img((?![^>]*alt=)[^>]*)>/i', '<img alt=""${1}>', $content);
});

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