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

5 Jun

"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!

BySrinivasu Chakravarthula

Srinivasu Chakravarthula is an accessibility evangelist for 12+ years. Accessibility is not just his profession but something that is very close to his heart. Srinivasu believes that technology plays an important role to make lives of people with disabilities independent. Srinivasu is recipient of Yahoo! Ratna and NCPEDP MphasiS Universal Design Award. Srinivasu is Certified Web Accessibility Specialist by International Association of Accessibility Professionals (IAAP). Srinivasu is also an individual Professional member of IAAP. Visit his personal website to learn more.

1 Comment

Missing alternate text: GAAD count down! | ServeOM Inclusion

[…] provided for as an alternative to images using <alt> attribute. Read our earlier post on “alt” – what, why, how and when? to learn more about alternate […]

 

Leave a comment

%d bloggers like this: