alt tag guide for your images

1 . When to have alt tag:

If image is adding value to the user, providing information important for the users then we should have alt tag.

/* DON'T */
<img src="poster.jpeg" alt="poster of say no to plastic"/>

/* DO */
<img src="poster.jpeg" alt="water bodies polluted by plastic
 waste and affecting life of water animals. 
Say no to plastic to save the water bodies" />

2 . Writing good alt tag

Never start alt tag with the 'image of..', 'picture of...'

/* DON'T */
<img src="poster.jpeg" alt="image of say no to plastic"/>

/* DO */
<img src="poster.jpeg" alt="water bodies polluted by plastic
 waste and affecting life of water animals. 
Say no to plastic to save the water bodies" />

3 . Length of alt tag

Length of the alt tag should be between less than 125 chars. For long description use longdesc attribute

/* DON'T */
<img src="poster.jpeg" alt="image of say no to plastic by the children. Saying that do not use plastic.Water bodies polluted by plastic waste and affecting life of water animals. 
Say no to plastic to save the water bodies. Do not use it.Water bodies polluted by plastic waste and affecting life of water animals."/>

/* DO */
<img src="poster.jpeg" alt="water bodies polluted by plastic
 waste and affecting life of water animals. 
Say no to plastic to save the water bodies" />

4 . Keywords for SEO

A good alt tag should be explaining the useful information about the image. You should have important keywords for SEO but do not try to over-crowd it.

5 . When not to have alt tag

If the contextual information surrounding an image is sufficient, it is unnecessary to fill in the alt tag. Including redundant information in the alt tag can be unhelpful for users of assistive technology.

<!-- DON'T -->
<figure>
   <img src="images/flowers.jpeg" alt="Yellow sunflowers fields" />
   <figcaption>Yellow sunflowers fields</figcaption>
</figure>

<!-- DO -->
<figure>
   <img src="images/flowers.jpeg" alt="" />
   <figcaption>Yellow sunflowers fields</figcaption>
</figure>

In above example we don't need to provide alt tag value as the figcaption is already have the same information.

6 . Presentation images

When the image is not adding any value to the user then add role="presentation" and assistive technology will skip the image.

/* DON'T */
<img src="filler.jpeg" alt="pattern"/>

/* DO */
<img src="filler.jpeg" role="presentation" alt="pattern" />

7 . No alt tag

If the alt tag attribute is missing then assistive technology will read the file name (or value of src attribute)

8 . Whitespace in alt tag

Do not add any space between empty value of alt.It should be alt="".

9 . Functional images

Functional images are those images which are linked. In these kind of images we should provide the alt tag. however, the alt tag should not start with 'link..' as the assistive technology will read - Link, image, and than alt tag.

As the links can be accessed with the keyboard, it is important the alt tag should make sense individually too.

<!-- DON'T -->
<a><img src="/images/wonderwoman.jpeg"/></a>

<!-- DO -->
<a><img src="/images/wonderwoman.jpeg" alt="wonderwoman"/></a>

In the above example, screen readers will read - Link, image, wonder woman

10 . Linked images

Using images with the links are known as linked images. In this image is surrounded by the link text too.

In such case, we can skip the alt tag altogether as the anchor tag has the text.

<!-- DON'T -->
<a><img src="/images/wonderwoman.jpeg"/> Wonder woman</a>

<!-- DO -->
<a><img src="/images/wonderwoman.jpeg" alt=""/> Wonder woman</a>

11 . Button as an image

If using images as a button then add alt tag about the action/type of button. Eg: search, click, submit, etc.

/* DON'T */
<button><img src="submit.jpg"></button>

/* DO*/
<button><img src="submit.jpg" alt="submit"></button>

12 . Context matters

Provide contextual information in the alt tag to the user about which page it is, which topic user is on through alt tags.

/* DON'T */
<p>Network support is one of the service we provide to our customers and excel.</p>
<img src="people.jpg" alt="people looking at the screen">

/* DON'T */
<p>Network support is one of the service we provide to our customers and excel.</p>
<img src="people.jpg" alt="happy business woman looking at the newly setup network device by the ">

Flowchart

Happy Learning!!