Writing Effective Alternative (ALT) Text for Images
Anyone who is acquainted with web accessibility knows that images need an alternative, or ALT, text assigned to them. This is because screen readers can't understand images, but rather read aloud the alternative text assigned to them.
In Internet Explorer we can find this ALT text, simply by pointing mouse over the image and looking at the yellow tool tip that appears. Other browsers (correctly) don't do this. The HTML for inserting ALT text is:
<img src="filename.gif" alt="Alternative
description places here">
If we use some guidelines then automatically it starts helping our site,
Spacer images and missing ALT text
Spacer images should always be assigned null ALT text or alt="". This is the way most screen readers completely ignores the image and wouldn’t even announce its presence. Spacer images are hide images that pretty most websites are using. The purpose of them is, to create space on the page.
Bullets and icons
Bullets and icons should be treated in much the same way as spacer images, so should be assigned null alternative text, or alt="". Think about a list of items with a fancy bullet proceeding each item. If the ALT text, ‘Bullet’ is assigned to each image then, “Image, bullet” will be read aloud by screen readers before each list item, making it take that bit longer to work through the list.
Contact us icon
Many websites use the link text as the ALT text of the icon. Imagine if icon was assigned alt="contact us". Screen readers would first announce this ALT text, and then the link text, so would say “Contact us” twice, which obviously isn't necessary.
Decorative images too should be assigned null alternative text or alt="". If an image is pure eye candy then there's no need for a screen reader user to even know it's there and being informed of its presence simply adds to the noise pollution.
Navigation and text embedded within images
Navigation menus that require fancy text have no choice but to embed the text within an image. In this situation, the ALT text shouldn't be used to expand on the image. ALT text should always describe the content of the image and should repeat the text word-for-word
Writing effective ALT text is not too difficult. If it's a decorative image then null alternative text, or alt="" should usually be used - never, ever omit the ALT attribute. If the image contains text then the ALT text should simply repeat this text, word-for-word. Remember, ALT text should describe the content of the image and nothing more.
Make sure also to keep ALT text as short and succinct as possible. Listening to a web page with a screen reader takes a lot longer than traditional methods, so don't make the surfing experience painful for screen reader users with bloated and unnecessary ALT text.