忘れがちな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にまとめておくほうが使いやすいかもです。
おこのみで！