Zwinkyness

This article is a follow-up of my article named Step 1 to an Accessible Weblog. In total, there will be about ten articles regarding this subject. Soon enough, you will be able to find links to all of them in my “visitor” section (which is currently in the process of being made).

Everyone knows that blind people cannot view images. However, they are necessary to give a website just that extra bit of spiffyness that makes it personal, fashionable and interesting. Certainly great designs can be made without the use of an image too, however when image-technology is given to a person, one should not hesitate to use it.

There is a difference between decoration-images and content-related images. Any header, footer, logo, background, etc. image should be specified within the style-sheet. The ‘why’ behind this questions is very obvious: screen-readers such as JAWS simply ignore a style-sheet and read text (content) only. Therefore, decoration-images specified by using CSS in an external style-sheet will simply not exist to a JAWS-user. However, this method cannot be used for content-related images (which do not appear in a style-sheet).

Whenever JAWS or another screen-reader passes by an image that is in no way specified by a text-equivalent, he will either fail to acknowledge the image or state random, useless information (such as: image). Therefore, there is one easy-to-use method that can help JAWS by providing a text-equivalent for every image. When present, JAWS will read the text: this way a blind user will know what the image shows without actually having to be able to view it. This is a simple method and very logic when one thinks about it: when a blind person asks us what we see, we give a description rather than taking a picture of it and showing it to said person. The same process can be done online.

One simple code will suffice when displaying an image:

<img src=”img.gif” mce_src=”img.gif” alt=”This is an example code of how to display an image with a text-equivalent” />

In case an image, although displayed, has no relevance to the content whatsoever, you can leave the alt=” ” empty. JAWS will simply skip the image then.

In case the alt gets too long, or you feel the need to give a longer description of the content on the image, there is always the LONGDESC attribute too. However, this attribute is only used when the description is so long it should be put on a different webpage. This attribute is rarely used by personal web-owners for said reason. I will give you an example of how to use it anyway:

<img src=”img.gif” mce_src=”img.gif” alt=”This is an example of how to use both the ALT and the LONGDESC attribute” longdesc=”description of this image.html” />