webページの画像にはすべてalt属性をつけることがアクセシビリティ的に推奨され、SEO的にも有利とされています。しかし、たくさんの画像を使用し、追加や削除、入れ替えなどを繰り返しているうちに、漏れることもあります。ページのソースからimg要素を検索してひとつひとつ確認していてはけっこうな手間になります。

そこで、ページ全体、もしくはページの特定の部分のimg要素のalt属性の有無を確認するscriptを作りました。each、replaceWithなどを使用。

「…alt属性を確認」ボタンをクリックすると、各画像のsrcとaltをブルーの文字で表示します。alt属性がなかったり、nullの場合は、画像のsrcと「alt無し」を赤い文字で表示します。jQueryのリンクとfunction、ブルーの文字と赤い文字のcss、htmlのbuttonをページに追加するだけで、実装できます。