Alt attribute of img tag

• You MUST put alt attribute to every img tag
• If the image has text, you should use the text as the alt attribute
  • If you can't copy the text from the design (e.g. text in an image), you should inform the designer or the project director to provide the text
• If the image is purely decorative, you can use alt="" to indicate that it doesn't convey any information

REASON

• Accessibility: Screen readers use the alt text to describe the image to visually impaired users.
• Fallback: If the image can't load (broken link, slow connection), the alt text is displayed instead, so users still understand the content.
• SEO: Search engines use the alt text to understand the image, which can help your website rank better in search results.

TIPS

Why you should avoid alt="image" or alt="filename.jpg":

• It doesn't provide any useful information to users or search engines
• It's redundant because the img tag already indicates that it's an image
• Use descriptive text that conveys the content or function of the image.

Why you should put alt="" for decorative images:

• It tells screen readers that the image is purely decorative and doesn't convey any information
• It prevents screen readers from reading out unnecessary information to visually impaired users
  • If the img tag doesn't have alt attribute, screen readers will read out the filename or the URL of the image

Example

BAD

You should put alt attribute to every img tag

<img src="logo.png">

GOOD

You should use the text as the alt attribute

<img src="logo.png" alt="Company name">

If the image is purely decorative, you can use alt=""

<img src="decorative.png" alt="">