miChecker：『画像ボタンにalt属性がありません。代替テキストを提供してください。』
代替テキストに関する一般的な事項は miChecker：『画像にalt属性がありません。代替テキストを提供してください。(もし支援技術がこの画像を無視するべき場合は、 alt=”” と設定してください)： src=”*”』に整理していますので、そちらもご覧ください。
検出理由
「問題あり」として検出される項目です。
type="image" 属性を持つinput要素に、alt属性による代替テキストが設定されていないと指摘されます。
<input type="image" src="search.png"> <!-- alt属性がない -->
根拠
画像ボタンはアクションを引き起こす元になりますので、そのボタンを押すと何が起きるかが正確に伝わらないと、利用者は操作を誤る可能性があります。例えば、検索ボタンにおいては alt="実行" だけですと、何を実行するのか分からない可能性があります。alt=""では、そもそも検索ボタンを見つけられなくなります。
修正方針
そのボタンを押すとどんなアクションがおきるのか、機能を提供するイメージ (Function Images) として代替テキストを設定します。
お勧めは動詞で書くことです。動詞を用いてアクションであることを明確にします。次のような場合、英語では"search"で十分かもしれませんが、日本語の場合に"検索"だけでは名詞として捉えられる可能性もあり、"検索を実行"あるいは"検索を実行する"とすることをお勧めします。
<input type="image" src="search.png" alt="検索を実行">
補足
placeholderをラベルの代わりに用いるケースが散見されます。一つの方法ではありますが、placeholderはカーソルを当てれば消えてしまいますので、目的には適しません。あくまで補助的なものと位置付けて考えるべきです。
ページ右上の虫メガネマークといえばサイト内検索であるということは、おおよその利用者にとっての共通のエクスペリエンスとなっています。そのため、視覚的にはラベルを省略するケースはあっても良いかもしれません。しかし、音声ブラウザで聞く人、あるいはプログラムが解釈するという観点で見れば、慎重にラベルや実行ボタンは十分な代替情報を記述すべきです。これは、WCAG 2.1 ではより厳密に求められるようになります。
関連する達成基準、達成方法
- 達成基準 1.1.1 非テキストコンテンツ
- 達成方法 F65: 達成基準 1.1.1 の失敗例 －
img要素、area要素、及びtype "image"のinput要素のalt属性又はテキストによる代替を省略している - 達成方法 H36: 送信ボタンとして用いる画像の alt 属性を使用する
(他のテクニックは「miChecker対策テクニック集」に整理されています。)