What does this accessibility issue mean?
Accessibility issue summary: image <input> element missing alt text
HTML input elements are often used as button or form controls on a website.
To meet WCAG accessibility guidelines, all HTML input elements with image attributes (<input type=”image”>) should have alt text to describe the image.
This alt text will provide context for screen reader users or any users who have images turned off. This alt text should provide information about the purpose of the button or form control to allow screen reader technology to comprehend how the input element should be used and communicated to users with visual impairments.
Solution:
Ensure <input type=”image”> elements have alternate text.
Example HTML violation: Input type = “image” missing alt text (WCAG Level A Issue)
<form action="/checkout">
<input src="/images/checkout.jpg" type="image" />
</form>In the example above, the <input type="image" /> element is missing an alt attribute.
This violates the accessibility rule identified by the Rule ID input-image-alt because it does not provide any alternative text that could be used by screen readers to describe the image to users.
This can make it hard for visually-impaired users to understand the purpose of the image button, particularly if it carries useful information or functionality, such as prompting a user to proceed to checkout in an eCommerce website.
Here's the corrected HTML:
How to fix "Input type = “image” missing alt text (WCAG Level A Issue)" issue
<form action="/checkout">
<input alt="Proceed to checkout" src="/images/checkout.jpg" type="image" />
</form>In this corrected code, an alt attribute describing the purpose and function of the image has been added to the <input type="image" /> element.
