SiteLint documentation and guidelines

Img empty alt with empty title

Description

The img element in HTML is used to embed images in a webpage. For accessibility purposes, the alt attribute provides alternative text for screen readers and other assistive technologies. When the alt attribute is empty (alt=""), it indicates that the image is decorative and can be ignored by assistive technologies. However, if both the alt and title attributes are empty, it can lead to confusion and accessibility issues.

Disabilities impacted

  • Visual impairments: users with visual impairments who rely on screen readers need meaningful alt text to understand the purpose of images. If both alt and title are empty, screen readers may ignore the image entirely, missing potentially important information.
  • Cognitive disabilities: users with cognitive disabilities benefit from clear descriptions of images to help them understand the content better.
  • Motor impairments: users with motor impairments who navigate using keyboards or other assistive devices rely on accessible images for a complete understanding of the content.

Why it matters

Providing appropriate alt text for images ensures that all users, particularly those using assistive technologies, can access and understand the content. When images are used decoratively, an empty alt attribute is appropriate, but it should be accompanied by a meaningful title if additional context is needed. Ensuring that images are accessible improves the overall user experience and adheres to accessibility standards.

Coding problems and solutions

Common coding problems

  • Empty alt and title for informative images: both alt and title attributes are empty for images that convey important information.
  • Misuse of empty alt attribute: using an empty alt attribute for non-decorative images, leading to missing information for screen reader users.
  • Lack of descriptive alt text: providing insufficient or unclear alt text that does not adequately describe the image.

How to fix it

Provide meaningful alt text for informative images

Ensure that informative images have meaningful alt text.

Correct example
<img src="company-logo.png" alt="Company Logo">
Incorrect example
<img src="company-logo.png" alt="" title="">

Use empty alt for decorative images

Use an empty alt attribute for decorative images and avoid using an empty title attribute.

Correct example
<img src="decorative-line.png" alt="">
Incorrect example
<img src="decorative-line.png" alt="" title="">

Avoid empty title attribute

If the image requires additional context that cannot be included in the alt attribute, use a meaningful title attribute.

Correct example
<img src="chart.png" alt="Sales chart for Q1 2024" title="Detailed sales chart for the first quarter of 2024">
Incorrect example
<img src="chart.png" alt="" title="">

Known limitations

  • Complex images: for complex images such as infographics, provide a longer description or a link to a more detailed explanation if necessary.
  • Dynamic content: ensure that dynamically loaded images also have appropriate alt and title attributes.
  • Testing across devices: test across different devices and screen readers to ensure that alt and title attributes are appropriately handled.

Resources