1 . When to have alt tag:
If picture is including worth to the person, offering info necessary for the customers then we should always have alt tag.
/* DON'T */
<img src="poster.jpeg" alt="poster of say no to plastic"/>
/* DO */
<img src="poster.jpeg" alt="water our bodies polluted by plastic
waste and affecting lifetime of water animals.
Say no to plastic to save lots of the water our bodies" />
2 . Writing good alt tag
By no means begin alt tag with the ‘picture of..’, ‘image of…’
/* DON'T */
<img src="poster.jpeg" alt="picture of say no to plastic"/>
/* DO */
<img src="poster.jpeg" alt="water our bodies polluted by plastic
waste and affecting lifetime of water animals.
Say no to plastic to save lots of the water our bodies" />
3 . Size of alt tag
Size of the alt tag must be between lower than 125 chars. For lengthy description use longdesc attribute
/* DON'T */
<img src="poster.jpeg" alt="picture of say no to plastic by the kids. Saying that don't use plastic.Water our bodies polluted by plastic waste and affecting lifetime of water animals.
Say no to plastic to save lots of the water our bodies. Don't use it.Water our bodies polluted by plastic waste and affecting lifetime of water animals."/>
/* DO */
<img src="poster.jpeg" alt="water our bodies polluted by plastic
waste and affecting lifetime of water animals.
Say no to plastic to save lots of the water our bodies" />
4 . Key phrases for search engine optimisation
A very good alt tag must be explaining the helpful details about the picture. It’s best to have necessary key phrases for search engine optimisation however don’t attempt to over-crowd it.
5 . When to not have alt tag
If the contextual info surrounding a picture is adequate, it’s pointless to fill within the alt tag. Together with redundant info within the alt tag might be unhelpful for customers of assistive know-how.
<!-- DON'T -->
<determine>
<img src="photographs/flowers.jpeg" alt="Yellow sunflowers fields" />
<figcaption>Yellow sunflowers fields</figcaption>
</determine>
<!-- DO -->
<determine>
<img src="photographs/flowers.jpeg" alt="" />
<figcaption>Yellow sunflowers fields</figcaption>
</determine>
In above instance we need not present alt tag worth because the figcaption is have already got the identical info.
6 . Presentation photographs
When the picture isn’t including any worth to the person then add function="presentation" and assistive know-how will skip the picture.
/* DON'T */
<img src="filler.jpeg" alt="sample"/>
/* DO */
<img src="filler.jpeg" function="presentation" alt="sample" />
7 . No alt tag
If the alt tag attribute is lacking then assistive know-how will learn the file title (or worth of src attribute)
8 . Whitespace in alt tag
Don’t add any area between empty worth of alt.It must be alt="".
9 . Purposeful photographs
Purposeful photographs are these photographs that are linked. In these form of photographs we should always present the alt tag. nonetheless, the alt tag shouldn’t begin with ‘hyperlink..’ because the assistive know-how will learn – Hyperlink, picture, and than alt tag.
Because the hyperlinks might be accessed with the keyboard, it is crucial the alt tag ought to make sense individually too.
<!-- DON'T -->
<a><img src="/photographs/wonderwoman.jpeg"/></a>
<!-- DO -->
<a><img src="/photographs/wonderwoman.jpeg" alt="wonderwoman"/></a>
Within the above instance, display screen readers will learn – Hyperlink, picture, marvel lady
10 . Linked photographs
Utilizing photographs with the hyperlinks are often known as linked photographs. On this picture is surrounded by the hyperlink textual content too.
In such case, we are able to skip the alt tag altogether because the anchor tag has the textual content.
<!-- DON'T -->
<a><img src="/photographs/wonderwoman.jpeg"/> Surprise lady</a>
<!-- DO -->
<a><img src="/photographs/wonderwoman.jpeg" alt=""/> Surprise lady</a>
11 . Button as a picture
If utilizing photographs as a button then add alt tag concerning the motion/kind of button. Eg: search, click on, submit, and many others.
/* DON'T */
<button><img src="submit.jpg"></button>
/* DO*/
<button><img src="submit.jpg" alt="submit"></button>
12 . Context issues
Present contextual info within the alt tag to the person about which web page it’s, which matter person is on by alt tags.
/* DON'T */
<p>Community help is without doubt one of the service we offer to our clients and excel.</p>
<img src="individuals.jpg" alt="individuals wanting on the display screen">
/* DON'T */
<p>Community help is without doubt one of the service we offer to our clients and excel.</p>
<img src="individuals.jpg" alt="glad enterprise lady wanting on the newly setup community system by the ">
Flowchart
Pleased Studying!!