SiteLint documentation and guidelines

Input image missing alt

Rule

  • Audit: Accessibility
  • Standard:
  • Level:
  • Success Criteria:
  • ID: 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: the alt attribute is missing from the <input> element, making it inaccessible to screen readers.
  • Non-descriptive alt text: the alt attribute is present but does not provide meaningful or descriptive text.
  • Using title instead of alt: the title attribute is used instead of alt, 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.

Incorrect example
<input type="image" src="submit.png">
Correct example
<input type="image" src="submit.png" alt="Submit Form">

Ensure alt text is meaningful

Provide meaningful alternative text that clearly describes the purpose of the image input.

Incorrect example
<input type="image" src="search.png" alt="Image">
Correct example
<input type="image" src="search.png" alt="Search">

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.

Incorrect example
<input type="image" src="login.png" title="Login">
Correct example
<input type="image" src="login.png" alt="Login">

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.

Resources