alt tags are the alternative attribute we pass to the images in HTML. alt tags are very important for accessibility and SEO.They are the most simple task to do.

alt tags are read by the screen readers as well as it will print of the screen when the image is not available.

If you have images in your application it is important to have alt tags for the accessibility. But that doesn't mean that you can put anything as alt tag.

To get 100% out of alt tag you should have effective alt tags. There are rules for the alt tag and we are going to learn that today.

Type of images & their alt tags

1. Functional Image (Clickable images and image with clickable text)

The images with the link are categorized as functional images. The alt tag of these imagesshould depend upon the context as well as the function of the images.

2. Decorative Images

The images which are just for decorative purpose are categorized as decorative images. The alt tag of such images needs to be evaluated properly. There would be the images which doesn't require alt tag and there would be the images where alt tag is important. Eg: seprator images vs icon for 'go to next page'.

3. Logo

It is common that the logo of the website if the image. The general practice is folks put alt tag - "XYZ logo". However, the logo image is also functional, it provides the link to homepage too. Hence, the appropiate alt tag could be "XYZ homepage".

4. Background Images

The rule is that content should not be part of the background image. If you have images that have content make them accessible by putting the text in the HTML too.

Tips for alt tags

1. Should be as per the context and function of the image

2. Should not be redundant

3. Should not start with 'image of...' or 'graphics of...'

4. Every image should have an alt attribute. If there is no alt text then leave it blank. eg: alt=""

5. Alt text of a functional image (e.g., an image within a link) should describe the function as well as the content.

6. Should be descriptive

Happy learning!!