画像ボタンの代替テキスト
Silktide は、がないフォーム内の画像ボタンを検出します。代替テキストのない画像ボタンは、ボタンを見られない人にとって、それを押すと何が起きるのかを知る手段がありません。
<!-- 問題: alt 属性がない -->
<input type="image" src="button.png">
<!-- 問題: alt が空 -->
<input type="image" src="button.png" alt="">
<!-- 修正済み: alt テキストが操作内容を示している -->
<input type="image" src="button.png" alt="メッセージを送信">
重要な理由
画像ボタン（<input type="image">）は、テキストラベルの代わりに画像を使用するため、alt 属性が、が読み上げられる唯一の名前になります。これがない場合、ボタンは単に「ボタン」と読み上げられるか、ファイル名で読み上げられます。送信ボタンを識別できないフォームは、一部の訪問者が安心して入力を完了できないフォームです。これは、問い合わせ、申し込み、購入を直接妨げる障壁となります。
通常の画像とは異なり、ボタンが装飾目的になることはありません。ボタンは必ず何らかの機能を持つため、常に名前が必要です。
修正方法
- 上の例のように、「検索」や「メッセージを送信」など、ボタンが実行する操作を示す
alt属性を追加します。 - 属性を空のままにしないでください。空の
alt=""は、ボタン自体を隠さずにボタンの名前だけを隠します。 - 代わりに、実際のテキストを含む
<button>要素に画像ボタンを置き換える方法もあります。こちらのほうがスタイルを適用しやすく、標準でアクセシビリティにも対応しています。
Silktide によるチェック方法
- 各ページにあるすべての画像ボタン（
<input type="image">）を探します。 - スクリーンリーダーから隠されているボタンを除外します。
alt属性がない、または空である各ボタンを報告します。
alt テキストは存在するものの、役に立たないと思われるボタンについては、別の送信ボタンの代替テキストチェックで扱います。