alt tag guide for your images
Tags: a11y, html, css, webdev
Published: 2023-02-26 10:54:25

**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.
```css
/* DON'T */
<img src="poster.jpeg" alt="poster of say no to plastic"/>
```

```css
/* 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...'

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

```css
/* 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

```css
/* 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."/>
```

```css
/* 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.

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

```HTML
<!-- 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.

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

```HTML
/* 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.

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

```HTML
<!-- 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.

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

```

```HTML
<!-- 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.

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

```css
/* 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.

```HTML
/* 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">
```


```HTML
/* 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


![Deciding an alt tag based on the image's use in the document, information adding to the value or not](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6fsdrpwmb85fax1mmz9y.png)



Happy Learning!!