AlfieWebDevTips Homefor new and experienced developers
[Home Home] [Web Development Web Development ] [Code Generators Code Generators ] [Resources Resources ] [Contact Us Contact ] |WebDevTips Privacy Privacy |
Print This Page

You are here : Home - Web Development - HTML - Accessibility - Images

Making images more useful



A picture can say thousand words, so they say, but what if you can't see that picture?

When used properly, images bring color and life to webpages. Text descriptions can make more sense when a visual demonstration is used. So the aim is to make that information useful to visitors who, for whatever reason cannot display or view images.

This is NOT just an accessibility issue. It is an issue that affects everyone who is not using a normal browser. Many users can't take advantage of graphics, such as PDA and mobile phone users. So descriptions are important.

Images can be broken down into 3 areas.


decoration

When using images as spacers or design elements (such as images to create curves etc) most developers do not use the alt tag. By not adding the tag some browsers will display the file source (as text) which will then get read by speech browsers.

Adding an empty alt tag on a image that serves no meaningful purpose other than eye candy will improve the readbility of the page.

Valid alt tags are

  • alt=""
  • alt=" "

Do not use

  • alt="curve image"
  • alt="spacer image"
or similar.

Most browsers will ignore empty alt tags. The result is that the flow of the document isn't interupted by whatever text the browser uses where it can't find the alt tag.


links or text

Where an image is used a text replacement the alt text should just mirror the word(s) used on the image. This keeps the readability of the page flowing smoothly.

Take a look at these examples.

1. NO Alt tag
My name is
This could render as My name is /webdevtips/html/accessibility/andy.gif

2. Incorrect Alt tag
My name is Andy image - 1k
This will render as My name is Andy image - 1k

3. Correct Alt tag
My name is Andy
This will render as My name is Andy

If the image was to be a link to the about me page let the visitor know its a link

My name is Andy (find out more about me)
This will render as My name is Andy (find out more about me)

Now you know, there's no excuse for you not to start checking your site :)


detailed images

For detailed images or photographs you may need to provide a longer description. Some browsers can crop the alt text after a predefined character count so your alt tag should just be a brief description of the image.

The image tag also uses the longdesc attribute which links to an html file containing a fuller description.

proper usage should be like this

yearly sales graphD

Not many browsers support the LONGDESC attribute at the moment, you may want to place a D-link near the image. A D-link is a normal text link with label "D" pointing to an HTML page providing a full image description. Adding the title tag also improves usability for users who have no idea what a D-link is.

The html for the above is :

<img src="graph.gif" width="80" height="61" alt="yearly sales graph" longdesc="graph.html" border="0"><a href="graph.html" title="see a full description of this image">D</a>


general image rules
  • Use empty alt tags for spacers and decorative images
  • Keep alt tags short (a good place for keywords)
  • Use the longdesc attribute for more detailed descriptions
  • Use the D-link wherever you use the longdesc attribute
  • Make sure that the source specified in longdesc actually exists
  • Do not use the word image in your alt tag
  • Do not use the alt tag to show the image filename or size

Along with repairing links, repairing your image tags are one of the best options for getting started making your site more accessible. The changes, depending on the size of your site may take a bit of time but the rewards are worth it.

Don't expect your page to validate just by repairing links and images, just proceed knowing that you are heading in the right direction.


[Back to Links] [Accessibility Home] [Next - Forms]




Why not discuss this article in our forum?
Get your questions answered quickly.

20-Jan-2003




Google
 

[back to top of page]   

[labelled with icra -  - this link will open in a new window] [RSS Content]

[Copyright © WebDevTips]