DEV Community

Neha Sharma
Neha Sharma

Posted on

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"/>
Enter fullscreen mode Exit fullscreen mode
/* 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" />
Enter fullscreen mode Exit fullscreen mode

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"/>
Enter fullscreen mode Exit fullscreen mode
/* 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" />
Enter fullscreen mode Exit fullscreen mode

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."/>
Enter fullscreen mode Exit fullscreen mode
/* 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" />
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
<!-- DO -->
<figure>
   <img src="images/flowers.jpeg" alt="" />
   <figcaption>Yellow sunflowers fields</figcaption>
</figure>
Enter fullscreen mode Exit fullscreen mode

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"/>
Enter fullscreen mode Exit fullscreen mode
/* DO */
<img src="filler.jpeg" role="presentation" alt="pattern" />
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
<!-- DO -->
<a><img src="/images/wonderwoman.jpeg" alt="wonderwoman"/></a>
Enter fullscreen mode Exit fullscreen mode

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>

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

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>
Enter fullscreen mode Exit fullscreen mode
/* DO*/
<button><img src="submit.jpg" alt="submit"></button>
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode
/* 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 ">
Enter fullscreen mode Exit fullscreen mode

Flowchart

Deciding an alt tag based on the image's use in the document, information adding to the value or not

Happy Learning!!

Top comments (0)