Skip to content
Contact us
  • There are no suggestions because the search field is empty.

Picture alt text

Alt text improves web accessibility and SEO by providing descriptive text for images, with scoring benefits for every image with alt text and penalties for missing alt text.

 

Image Alt Texts in HTML

Description:

Alt text (short for "alternative text") is a crucial element for web accessibility and SEO. It provides textual descriptions for images on your webpage, helping users who rely on screen readers and search engines to understand the content and context of the images.

 

Alt Text Scoring Criteria:

  • Every Image Has Alt Text (+3 points): Providing alt text for every image enhances accessibility and SEO. Each image with alt text earns +3 points.

  • Missing Alt Text (-1 point, Maximum of -10 points): Images without alt text hinder accessibility and SEO. Penalty: Math.min(10, img_without_alt) * -1.

 

Example Implementation:

<img src="example.jpg" alt="A beautiful sunset over the ocean">
<img src="illustration.png" alt="Illustration of growth chart">
<img src="photo.jpg" alt="Portrait of a happy family">

 

Best Practices:

  • Be Descriptive: Alt text should be concise but descriptive, accurately conveying the image's purpose and content.

  • Avoid Repetition: If multiple similar images serve the same purpose, use the same alt text, ensuring it's still relevant.

  • Decorative Images: For purely decorative images that don’t convey meaningful content, use empty alt text (alt="") to indicate their decorative nature.

By effectively implementing alt text, you enhance both the accessibility of your webpage and its SEO performance.

Note: Alt text should not be confused with the "title" attribute, which provides additional information when users hover over an image but is not used by screen readers or search engines for content understanding.

 

 

Related Articles: