This is for an "Add to basket" control for which one of my colleagues has designed a nice graphic. Obviously it should generate a post request, which a simple hyperlink isn't going to do.

Amazon achieves it using an image input. But what are the pros and cons of

<input type="image" src="atb.png" alt="Add to Basket" />

versus

<button type="submit"><img src="atb.png" alt="Add to Basket" /></button>

(and using CSS to control the appearance)?

I guess it boils down to these questions:

  • Do all browsers, graphical and non-graphical, succeed in their duty to make image inputs keyboard-accessible? (Or, in the case of keyboardless devices, make them accessible by whatever the means of input is?)

  • What browsers are there that don't support <button>?

  • What other advantages/disadvantages are there of each?

  • Are there any other possible approaches with their own advantages (besides forgetting it and just using a plain submit)?

Edit
Report