The use of alt text on images makes pages more accessible and better optimized. However, using alt text should be given extra care, depending on the need to use them.

Alt Text Distinctions

1. If it is necessary to apply alt text to an image, use the attribute tag in your HTML. Just type in alt=”example alt text” as part of an img element.

2. Basically, alt text should represent a certain image in such a way that if a browser is unable to download the image properly, the text displayed would still tell the user what the image stands for. Check out the Amazon menu image above. When you view the Amazon.com menu without the images, all you will see is alt text. The site is still able to serve its purpose without the images.

3. If possible, alt text must exactly stand for what the clickable image it is used on defines. For instance, it would be best for a button that says “Home” to have an alt text that also says “Home” for better functionality.

In cases of non-menu images, alt text should say where a user will be directed once the image is clicked. For instance, an image of a book that is linked to the Amazon.com home page should contain an alt text to this effect: alt=”purchase this book at amazon.com”

4. Alt text could be used to an image that serves to boost a web page’s content. In this case, the alt text should also add meaning to the page.

5. This image contains alt text that explains where a user will be taken once the image is clicked. Always remember the difference between images that provide information and images that are simply put there to make the page look more attractive. Try looking at the eBay.com home page and observe the alt text used through the Fire fox Web Developer toolbar.

6. There is no need to apply alt text on images used merely for decorative purposes. Take for example this image from eBay.com. This image does necessarily provide additional information about the eBay companies so it does not require the use of alt text.

7. When you mount a web page image that merely adds to the beauty of the page, you may simply use the alt text command alt=”” without anything between the quotation marks. Screen readers will simply ignore the command.

8. It is recommended that you use CSS background rules for images that merely serve to decorate a page instead of adding them to your HTML.

Users sometimes turn off images when browsing for various reasons. It could be because they want to save time, or because their browsers are not capable of reading images, or because they are using an aural screen reader.

It is important to remove decorative images from the HTML to provide greater convenience to users. As mentioned earlier, use CSS for this purpose.

Tags: Using Alt Text Effectively On Web Page Images