input要素のtype="image"に、alt属性を省力してはいけない。【アクセシビリティ】

常に意識してマークアップしている方であれば、今回書いていることは当たり前のことなのですが、以外と忘れられてりうなぁと感じたのでブログに書かせていただきます。

alt属性の意味はもはや説明が要らないくらいに浸透しているものと思いますが、HTMLの仕様書には以下のように書かれています。

非テキスト系の要素である、IMG、AREA、 APPLET、INPUT要素は、著者に対し、当該要素が順当にレンダリングされない場合の要素内容として提供される代替テキストを指定することを求める。代替テキストを指定すると、グラフィックディスプレイ端末がないユーザ、フォーム非対応のブラウザを使っているユーザ、視覚障害のあるユーザ、音声合成装置のユーザ、グラフィック系ユーザエージェントを画像を表示しない設定で使っているユーザ、等の助けになる。

しかし、それでもalt属性を省力しているサイトは未だに多くあると感じています。例えば、以下のような場合。

サイト内検索用のフォームを設置していて、サブミットボタンを画像にしています。この場合のinput要素のtype属性はimageを指定することになります。仕様通りにいくと、この場合はalt属性が必要になるのですが、この時にalt属性を省略しているケースが結構多いです。

この場合のalt属性の指定方法としてWCAG 2.0技術書に書かれている以下の文書が参考になります。

検索ボタンが拡大鏡の画像を使っている。その代替テキストには「拡大鏡」ではなく、「検索」と書かれている

参考

マークアップ

この場合のマークアップは以下のようにすると良いでしょう。type="image"にalt属性に『検索』を代替テキストとします。

<form action="/" method="get" id="srch" name="srch" role="search">
<label for="srchInput">サイト内検索</label>
<input type="text" name="srchInput" value="" id="srchInput" tabindex="1">
<input type="image" src="search-btn.gif" alt="検索" id="srchBtn" tabindex="2" value="submit">
</form>

こうすることにより、WCAG2.0の達成基準 1.1.1非テキストコンテンツを満たすことになります。

alt属性はなぜ必要か

alt属性を指定していない場合、画像のファイル名を読み上げてしまうスクリーンリーダーが中にはあります。ファイル名を読み上げてたところでその画像が何の役割をしているのか分からなかったりするわけです。そのためにもスクリーンリーダーを使っているユーザー、他にもテキストブラウザなど画像を表示できないブラウザを使っているユーザーに向けてalt属性の指定は必要なわけです。

今回、書いたことは他にもWCAG 2.0技術書に書かれている以下の文章が参考になりますので、ご参考ください。

F65: 達成基準 1.1.1 の不適合事例 － img要素、area要素、及び type "image" のinput要素のalt属性を省略している