Picture alt text

Image Alt Texts in HTML

Description:

Alt text, short for "alternative text," is a crucial component of web accessibility and SEO. It provides textual descriptions for images on your web page, aiding users who rely on screen readers and search engines in understanding the content and context of the images.

Alt Text Scoring Criteria:

• Every Image Has an Alt Text (+3 points): Providing alt text for every image on your webpage enhances accessibility and SEO. Each image with alt text earns you a score increase of +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: Make alt text descriptive and concise, conveying the image's purpose and content accurately.
• Avoid Repetition: If multiple similar images serve the same purpose, you can use identical alt text, but ensure it remains relevant.
• Decorative Images: For purely decorative images that don't convey meaningful content, use empty alt text (alt="") to indicate their decorative nature.

By implementing alt text effectively, you enhance the accessibility of your webpage and improve 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.