input-image-alt

Make sure that input elements of image type (i.e. <input type="image">) have an alternative text.

Description

This accessibility rule requires developers to include descriptive alternate text for <input type="image"> elements in HTML, ensuring users with visual impairments or using assistive technologies can understand the function or purpose of the image-based input buttons.

Why is it important?

Ensuring that <input type="image"> elements have alternate text is crucial for making websites accessible to everyone, including those who are blind or visually impaired. Without descriptive alternate text, users relying on screen readers won’t know the purpose of image buttons in forms, leading to confusion and frustration.

By adding clear alternate text, developers can ensure that all users, regardless of their abilities, can effectively interact with and understand web forms, promoting inclusivity and a better user experience.

How to fix?

Ensure alternative text is provided that describes the input button’s purpose. This can be done using title, aria-label, aria-labelledby or alt attributes.

References

• WCAG 1.1.1: Non-text Content
• WCAG 4.1.2: Name, Role, Value
• Accessibility Insights: input-image-alt