忘れがちなalt属性

HTMLをマークアップする際に、画像のalt属性ってついつい忘れてしまいますよね...。
しかし、SEO対策の意味でもアクセシビリティ担保の意味でもalt属性はもれなく書いておきたい。
というわけで、今日はシンプルなStyle要素を使ってalt属性の抜け漏れを簡単にチェックする方法を紹介します。

例えば下のような画像を使用したHTMLレイアウトがあるとき

index.html

<html>
<body>
--省略--
  <div class="row">
    <div class="column">
      <img src="pathto/hoge.jpg" alt="画像1">
    </div>
    <div class="column">
      <img src="pathto/fuga.jpg">
    </div>
    <div class="column">
      <img src="pathto/wow.jpg" alt="画像3">
    </div>
  </div>
</body>
</html>

1枚目、3枚目の画像（img要素)にはちゃんとalt属性が入っていますが、2枚目の画像にはalt属性を入れ忘れています。
実際の制作においてはもっと画像の数は多くなりますので、ソースコード上で一つ一つ目視確認とか、なるべくやりたくない...っていうかそれ絶対見落としが発生するパターンですし。
そこで簡単なスタイルを指定して、これをチェックします。

スタイルを指定してalt属性の抜けをチェック

index.html

<html>
<body>
<style>
img:not([alt]){
    outline: 5px solid red;
}
</style>
--省略--
  <div class="row">
    <div class="column">
      <img src="pathto/hoge.jpg" alt="画像1">
    </div>
    <div class="column">
      <img src="pathto/fuga.jpg">
    </div>
    <div class="column">
      <img src="pathto/wow.jpg"alt="画像3">
    </div>
  </div>
</body>
</html>

はい、altが抜けている画像を赤枠で囲むことが出来ました。
これを応用すればhref属性のないa要素や、type属性のないbutton要素などもチェック出来ますね。素晴らしい。
このHTMLチェックが、もっと簡単に出来るツールもあります。それがYahoo Debug CSSのChrome拡張機能です。
でもこのくらい簡単なものなら自分用にカスタマイズして、一つのCSSにまとめておくほうが使いやすいかもです。
おこのみで！

忘れがちなalt属性

スタイルを指定してalt属性の抜けをチェック

参考資料