Sometimes, alt text insufficiently describes the content or meaning of an image. The Long Description or "longdesc" attribute exists as a solution for these instances. If displaying a chart as an image, for instance, a sentence may not be enough to convey all of the data that is provided in the chart. However, certain browsers do not support the "longdesc" attribute. To solve this problem, the W3C recommends that you create a separate page with the full description of the image and place a link to the description next to the image. Then, insert the page url of the description in the "longdesc" attribute.
For HTML and XHTML:
<img src="chart2006.jpg" alt="chart of 2006 statistics" longdesc="longdesc.html"... <a href="longdesc.html">Chart of 2006 Statistics Description</a>
For images like charts and graphs, it helps to determine what the purpose of the images is. If the purpose is to show a trend, make sure to include the trend in your description.
If the purpose is to show a trend, make sure to include the trend in your description.
Developers often use images in place of certain html code for stylistic reasons. They are used for graphical representations of text and symbols, list bullets, spacer images, and graphical buttons. These images also need alt text or a long description.
Graphical representations of text and symbols are useful in many situations. For instance, a developer wants to use fonts that users may not have. The problem with using an image to replace text is that the image cannot be re-sized by the user. This is especially troublesome to people with poor eye-sight. It is better for accessibility to use standard markup languages to create content such as HTML, XHTML, or MathML for all text and symbols in your website. Using CSS, you can specify multiple fonts so that if a user doesn't have one you can give them an acceptable alternative. If you must to use an image to replace text, you must specify the text in the image as the alt text.
For CSS:
body { font-family: Myriad, Arial, Helvetica, sans-serif; }
.myclass { font-family: Verdana, san-serif;
When using images as headers, remember to still include the header tag. Although it might be visually obvious that the image is a header, screen readers and text-browsers will not be able to tell.
Sometimes, images are used to replace the bullets used in lists. CSS provides an easy way of replacing standard bullets with a custom image. Browsers then display the images as bullets when images are turned on, and standard bullets when images are turned off. If this is not possible, then the alt text for un-ordered list images should be something like "bullet" or "*". You may also use an HTML bullet directly in the alt text by using the ascii code (15). For ordered lists, the alt text should be a sequential listing of numbers or letters. Avoid describing what the bullet looks like unless the information is important (15).
You may also use an HTML bullet directly in the alt text by using the ascii code (15).
Avoid describing what the bullet looks like unless the information is important (15).
For Un-Ordered Lists:
<img src="bullet.jpg" ... alt="bullet" OR alt="*" OR alt="•" ...
For Ordered Lists:
<img src="bullet.jpg" ... alt="1" OR alt="A" ...
Decorative images are just for appearance purposes and contain no valuable information. Alt text should be left blank for these images, i.e alt=" ". Similarly, spacer images are empty images which are used to fake padding, margins, and otherwise control the presentation. Spacer images should be avoided at all costs as they contribute heavily to bloated code and prevent users from removing the visual layout. CSS should be used to control visual presentation. However, if spacer images are used they should use alt=" " so that screen readers know to skip over them.
Graphical buttons can be used to replace standard buttons using the <input> or <button> tags in HTML and XHTML forms. When creating a graphical button using the <input> tag, the text in the alt attribute of the tag will appear as the alt text for the button image. However, when using the <button> tag, the alt text you place within the <img> tag following the <button> tag will display as the alt text for the button image (16).
However, when using the <button> tag, the alt text you place within the <img> tag following the <button> tag will display as the alt text for the button image (16).
For the <input> tag:
<input type="image" src="go.gif" alt="go" value="Go ...
For the <button> tag:
<button name="go" type="submit"> <img src="go.gif" alt="Go" ...
Also, remember that graphical buttons cannot be re-sized and thus are not as accessible as standard buttons.
Images may already have a caption or some other descriptive text around them. Images may also be used more than one time on a page. In these cases, the alt text should be left blank unless it is providing information that is different from what has already been stated (17).
In these cases, the alt text should be left blank unless it is providing information that is different from what has already been stated (17).
Background images can be applied to websites using CSS and markup. If a background image contains valuable information, this information is lost as screen readers and other user agents do not have access to alt text if these images are removed. Therefore, important images should be placed on the page rather than in the background (17).
Therefore, important images should be placed on the page rather than in the background (17).
Moving Images such as animations and those created with Flash can pose a serious problem to people with photosensitivity or epilepsy. People with these disorders are highly sensitive to flashing light, and rapid movement of images on a screen can be extremely harmful. According to Section 508, "Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz (49)." Steps should be taken to eliminate images which flicker, blink, or move from websites. If a site allows ads from outside sponsors, examine the ads for flicker, blinking, or movement before allowing them onto the site.
According to Section 508, "Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz (49)."
.
.
.