Providing descriptions of graphics and graphic links improves the accessibility of web pages. Graphics that provide important information to the user or graphics used as links should include a description.
Within the <IMG> use the ALT attribute to provide a short text description of the image. The description will appear (or be read) as the user moves the mouse over the image.
HTML Code:
<IMG SRC="petrie.jpg" ALT="Petrie Hall">If an image is not important or relevant to the content of the page use an alt tag with empty quotes. This technique will cause the screen reader to ignore the image. <IMG SRC="petrie.jpg" ALT="">
A HTML 4.0 attribute that
allows a link to a more descriptive explanation of an image.
This would be beneficial for images that contain information.
Pie Charts, Maps, etc.
HTML Code:
<IMG SRC = "samford1.jpg" ALT= "Samford Hall"
Description of Photograph:
The Sciences Center Laboratory was open for use in Fall 2005 by the College of Sciences and Mathmatics.
CSS gives the designer a way to include a more thorough description of an image without disturbing the layout of the web page. The following CSS tags will hide text from the sighted user while providing the Screen Reader user with a description of the picture.
/*Hidden Picture Description */
#picture_description {
position: absolute;
overflow: hidden;
width: 0;
height: 0;
}
<p id="picture_description"> The Sciences Center Laboratory was open for use in Fall 2005 by the College of Sciences and Mathmatics.</p>