How can I make an image act as a button?

Question

I am curious about how to make an image act as a button and ensure it's accessible. Any guidance?

Answer

Making an image act as a button can be accomplished by nesting an <img> element within a <button> element and ensuring there is accessible text (alt on the image). Here's a basic example:

<button>
   <img src="/some-img-url/" alt="Submit Form">
</button>

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.