"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:
- Due to bandwidth reason, if images are not loaded on to the web page
- search Engines like Yahoo! Search (External link) or Google (external link) do not understand graphics
- User may be a person with vision impairment and rely on screen reader (external link) to browse the web
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
<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!
[…] 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 […]
[…] Text alternative for non-text content: It’s easy; all that you need to do is provide alternate text for informative images, active images (images that are links). Ensure no informatiion is conveyed using background images (CSS images). If there are images just for decorative purpose, be sure to mark them up using null alt attribute. Read my earlier post to learn more about “alt”. […]