Input image missing alt
Description
The <input>
element with a type="image"
allows an image to be used as a submit button in a form. The alt
attribute for this type of input is crucial for accessibility, as it provides alternative text for screen readers and other assistive technologies. When the alt
attribute is missing, users who rely on these technologies are unable to understand the purpose of the image input, leading to confusion and accessibility issues.
Disabilities impacted
- Visual impairments: users with visual impairments who rely on screen readers need the
alt
attribute to understand the purpose of the image input. - Cognitive disabilities: users with cognitive disabilities benefit from clear and descriptive alternative text that helps them understand the functionality of the image input.
- Motor impairments: users with motor impairments who navigate forms using keyboards or other assistive devices rely on alternative text to interact effectively with image inputs.
Why it matters
Providing the alt
attribute for <input>
elements of type="image"
ensures that all users, particularly those using assistive technologies, can understand and interact with the form as intended. Missing alt
attributes can lead to a poor user experience, incomplete form submissions, and accessibility barriers.
Coding problems and solutions
Common coding problems
- Missing
alt
attribute: thealt
attribute is missing from the<input>
element, making it inaccessible to screen readers. - Non-descriptive
alt
text: thealt
attribute is present but does not provide meaningful or descriptive text. - Using
title
instead ofalt
: thetitle
attribute is used instead ofalt
, which is not a suitable replacement for accessibility.
How to fix it
Include descriptive alt
text
Ensure that every <input>
element of type="image"
includes a descriptive alt
attribute.
Ensure alt
text is meaningful
Provide meaningful alternative text that clearly describes the purpose of the image input.
Do not use title
attribute as a replacement for the alt
attribute
The alt
attribute is essential and should not be replaced by the title
attribute.
Known limitations
- Complex images: for complex images, ensure that the
alt
text succinctly describes the action or purpose without being overly verbose. - Dynamic content: when dynamically adding image inputs, ensure that the
alt
attributes are correctly included and descriptive. - Testing across devices: test forms across different devices and screen readers to ensure the
alt
text is correctly interpreted and useful.