HomeMaking 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.
- Images used for spacing and decoration.
- Images used for links or text.
- Detailed graphs or photographs etc.
- General image rules.
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"
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
This will render as My name is Andy image - 1k
3. Correct Alt tag
My name is
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 isThis 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
DNot 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.
- Accessibility Home
- Accessibility - a new way of thinking - More information that might be useful before you start.
- Accessible anchors - Learn how to make your links more useful.
- Accessible images - beyond the alt tag.
- Accessible forms - web form accessibility also aids overall form usability.
- Useful links and resources
Get your questions answered quickly.
]
[
]