Friday 4 December 2009

Accessible graphics

Most people know that you must add alt text to images, for example:

<img src="http://www.blogger.com/myphoto.jpg" alt="The Nightingale Centre" />

But there are other things you need to add for full accessibility and usability.

You should set a height and width for your image (and this should be no greater than the actual height and width of the image).

<img src="http://www.blogger.com/myphoto.jpg" height="240" width="360" alt="The Nightingale Centre" />

If an image is very high resolution, it will take a while to download, so you should resize it to a smaller size in your graphics program before uploading it (don't just set a smaller height and width in your HTML).

Internet Explorer uses the alt text as a tooltip, which is actually incorrect. Firefox uses the title attribute as the tooltip text, which is correct. So, if you want the title of your image to be displayed when a Firefox user rolls his/her mouse over the image, you need to add a title attribute.

<img src="http://www.blogger.com/myphoto.jpg" height="240" width="360" alt="The Nightingale Centre" title="The Nightingale Centre" />

You should also ensure that you use the correct format for your images. JPG format should always be used for photos. PNG or GIF formats should always be used for other graphics, such as logos.

No comments:

Post a Comment