"alt" – What, Why, How and When?

Today, we see that web content is increasing with a rocket speed and more often we see non-textual elements on the websites and applications. let’s consider scenarios such as:

So how can make sure such non-text content is accessible to all users and search engines specially those images and image links? Ultimate solution is appropriate use of alt.

alt means alternative; means we should provide alternative to non-text content such as images. It’s a MUST have requirement as per Web Content Accessibility Guidelines (WCAG) 2.0 (External website). The guideline 1.1 says:

Guideline 1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

Ideally, alt is a very simple technique but very helpful to several users including those who rely on low band width connections, screen reader users and search engines etc., How this wouold help them? for those who disable the images due to low band width connection, the text explaining the image will be shown, search engines can crawl through the alternate text while displaying search results and screen readers will read the page from code and announce the alternate text to users.

How to add alt attribute? Very simple; just add inside the element. Example:
<img src="folder/image.jpg" alt="Sample Image">.

It’s essential to remember that the alt attribute given is meaningful and appropriate.

When to use? The answer is “always” but one thing to remember is that if the image is just about decorative, one should use null alt attribute. Example code would be: <img src="folder/decoimage.jpg" alt="">

To conclude, let’s not forgot alt!

Tags :

2 thoughts on “"alt" – What, Why, How and When?

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top