As a follow up to my HTML form dos and dont’s post comes the next part of the series, HTML img tag does and dont’s. Some are musts for every site, others are common sense accessbility tips that you should use, but may skip if on a tight budget. If you’re a designer and are experienced, doing all of these does not add time to a project and makes the web a much better palce for everyone involved.

1. Do use the alt attribute. It allows context for people using graphicless browsing. This text will appear inline in place of the image if the image is not displayed. Not to mention that without them, the accessibility of your site is dropped an order of magnitude for those that use text to speech programs to help them browse.
2. Do use the title attribute if you want tool tips to appear upon hovering. Correct specification compliance calls for these to be made from this attribute. Some browsers realzie that web devs don’t usually do this and substitute the text in the alt attribute if it is there. Not only is this wrong, but it is also not guaranteed. This is of utmost importance if you have a slow loading site and people know where the navigation bar is. They can hover and find a navigation image they need before it loads.
3. Do not use images for your sole navigation. Back them up with text links as well.
4. Do use the height and width attributes. Use them to properly describe the ACTUAL size of the graphic. This allows browsers to pre-render layout knowing how much space the image will take up.
5. Do not use height and width attributes to resize images in teh browser. There are several sites I visit that have 1024 x 768 size graphics shown as small thumbnails, but use teh actual 1024 x 768 size graphic and allow the browser to shrink it to the size they specify in the height and width properties. Whereas, this does work, those images are HUGE. Resizing them in a graphics program to the desired display size will drastically reduce the load time of your page.
6. Do not use spacer graphics. CSS (and tables if you must) are quite capable of performing layout without if done properly. Even if the graphic is only downloaded once and then cached, the browser still has to make a call to the server each time the image is referenced. This back and forth slows things down.
7. Do use an alt attribute of “” if you must use spacer graphics. Screen readers will say an unknown image exists if the alt attribute is missing, but will be silent if they see a blank “” defined for the alt attribute.
8. Do use descriptive text for the alt and title attributes. Don’t use generic text like “logo” and “click here”. Instead say “CompanyX logo” and “Shop our store” instead. Oh, and make sure your company name is used, NOT the word company…
9. Do not mess with the tab order of linked images, this is counter intuitive for users.
10. Do keep in mind the total size of all images used on your page. Remember that not everyone has DSL/Broadband.
11. Do use the longdesc attribute to point to a text file with a long description of the image if needed. This is very useful for things like maps, charts, graphs, etc. Anything a screen reader using person could not understand from the alt attribute alone. Just using “2004 financials chart” tells that user nothing, but having a file that spells it out in text allows them to understand the menaing behind the image. An oft unused ability here is to link to a copyright file for sites such as photographers.
12. Do not use onClick events as the sole method of triggering functionality for changing the interface. In other words, if you have a column of information on the left, and use JavaScript/DHTML to change the innerText of a column on the right to display more details when an object is clicked. This is not possible for people not using mice.
13. Do not use the “align”, “border”, “hspace”, and “vspace” attributes, as they have been deprecated from HTML 4.01, and are not supported at all in XHTML Strict 1.0. Browsers at some point will stop interpreting these. No need to switch over old sites yet, but if you’re doing a redesign or new site, build for the future.

While not necessarily all encompassing, these are some of the most important issues that are oft forgotten. Are there any others I missed?