Images & HTML

Images may be your favorite part of today's Web scene, but for those who rely upon a program other than a typical browser to interpret the Web, images are often a stumbling block. Lazy HTML coders who don't supply ALT information for IMG tags only compound the problem. In addition to adding ALT tags, you can use two methods to ensure images convey what they should.

D Links
D links offer a way for Web builders to add an unobtrusive link to more information or to a description of an image. The link, represented by [D], is placed next to the image. Those unable to view the image can then follow the [D] link to the description.

LONGDESC
LONGDESC is an HTML 4.0 attribute for the IMG tag. The value of the LONGDESC is a URL to a file that contains the alternative textual--or linear--material. Since not all browsers support the LONGDESC value, it is best to use both the [D] link and the LONGDESC link. When you write the descriptions for the D link and LONGDESC, try and describe the image in words. Don't rely on cursory text such as "Image of the architecture," which makes sense only if you can see the architecture depicted.

Image Maps
Priority 1 - Image maps let you get creative with your design, but they also pose a problem for users who need to know what the various links are within the map but can't see them.

Using ALT information in each AREA tag is the first step, and it's easily done. Just add ALT="informative description" exactly as you do for IMG tags. You also should make sure your IMG tag has useful ALT info.

A third option, once browser support is in place, provides a cutting-edge method for simultaneously creating both a system of inline links to the hot spots for those who can't access the image and a standard client-side image map. By using the OBJECT container instead of IMG and the A tag instead of AREA, you can set up text links for those who can't access the OBJECT at the same time that you define the COORDS client-side image map's hot spots:

<OBJECT data="header.gif" type="image/gif" usemap="#nav_map">
<MAP NAME="nav_map">
<A HREF=" products.html" SHAPE="rect" COORDS="0,0,50,50">Find out more about product X.</A> |
<A HREF="feedback.html" "RECT" COORDS="50,50,200,200">Send us Feedback</A>
</MAP>
</OBJECT>

OBJECT
When using the OBJECT tag (for images or multimedia), there are two ways to code alternative text. One is to use ALT text between the opening and closing tags:

<OBJECT data="search.gif" type="image/gif">Search our site.</OBJECT>

In addition to using ALT text, the WAI also recommends using the TITLE attribute within the <OBJECT> tag:

<OBJECT data="search.gif" TITLE="Search" type="image/gif">Search our site.</OBJECT>

ASCII
ASCII art conveys meaning by the appearance of a series of characters viewed as a whole, and it does not translate well when read by user agents. So, instead of using ASCII in Web pages, try using an image or explain what the ASCII represents. Or, you can use the SPAN tag and define the TITLE attribute. Finally, you can use the OBJECT tag to include ASCII art and import the ASCII from a text file.

HTML Tip 1

Use only hexadecimal #RGB values for colors. The behavior of named colors is browser-idiosyncratic and totally unpredictable.

HTML Tip 2

You can resize your images without a graphics program by changing the HEIGHT and WIDTH in your image tag.

Page layout with tables

Bad HTML habits

General Accessibility tips

10 Website planning mistakes

The history of HTML

HTML Forms

HTML Font Tips

HTML & the <head> tag

HTML writers guidelines

HTML code optimization

The importance of meta tags

Website planning tips

SEO & HTML

Why you should learn HTML

Dreamweaver Vs FrontPage

HTML Lists

CSS basics: ID's & Classes

DHTML explained

Website elements

Accessible web design

Images & HTML