Image inputs without alt text: a critical form accessibility gap
An <input type="image"> is a graphical submit button. Without an alt attribute, screen reader users have no idea what tapping it will do. Add alt describing the action ("Search", "Add to cart") to every image input.
An <input type="image"> is a graphical submit button. Without an alt attribute, screen reader users have no idea what tapping it will do. Add alt describing the action ("Search", "Add to cart") to every image input. The image input is a legacy form element rendering an image as a submit button: <input type="image" src="/btn-search.png">. The alt attribute provides the accessible name — same role as button text.
Last updated·
What it is
The image input is a legacy form element rendering an image as a submit button: <input type="image" src="/btn-search.png">. The alt attribute provides the accessible name — same role as button text.
Why it matters
Without alt, screen readers say "image submit button" with no context. WCAG 4.1.2 failure. Most modern designs replace image inputs with proper <button> elements anyway — but if you use them, label them.
How to fix it
- Add alt that describes the action. <input type="image" src="/btn-search.png" alt="Search">. Match what visible button text would say.
- Prefer <button> over <input type="image">. Modern designs use a styled button with an inline SVG. Easier to maintain, easier to make accessible.
- Audit with axe DevTools. The "input-image-alt" rule catches every missing alt on image inputs.
Authoritative sources
- Google Search Central documentation — Google
- Schema.org vocabulary — schema.org
- SEO Starter Guide — Google Search Central
- MDN — HTML meta and link elements — Mozilla MDN