Graphics
Using ALT Text To Identify Graphic Images
1: ALT Text Example
Roll your cursor over the above image and you should see an ALT text box that looks similar to the below image:
What is ALT Text? It's a short text description of a graphical element (picture, image, photo, graphical link, etc) on a Web page.
The ALT text attribute is implemented through the HTML based <img> tag. The <img> tag is used to place images onto a Web page (this is typically done using the Insert Image function in authoring tools such as DreamWeaver).
For example, if you wanted to place an image depicting an aerial view of the University onto a web page, the HTML code to do this would look something like: <img src ="university.gif"alt="An aerial view of the University">. The ALT text would then show up when a user rolls their mouse over the image or the words "An aerial view of the University" would be read aloud by a computer (such as in the case of screen reading software that "reads" the ALT text for visually disabled persons when they tab their browser's cursor to the image).
REQUIRED: Cal Poly Official Web pages are legally required to implement the ALT text attribute in order for our pages to be in compliance with Section 508 Web Accessibility Standards. Graphical elements used for navigation or other user content purposes must utilize the ALT attribute with text that describes the depiction or purpose of the image. Screen reading software "reads" the ALT text for visually disabled persons. For more information on this topic see the presentation titled Does Your Site Talk? and the Web Accessibility section of this Web site.
Optimizing Graphical Images To Improve Download Times
You should try to keep the file size of graphical images small enough to load "reasonably quickly". Think about the user on the other end who's using a slower modem. Weigh the trade-off between the information or stimulation created by graphics vs. slow download. To read about which file types can be read by Web browsers, which file types require less storage space, and which file types load faster, read the guidelines for still images.
Newer versions of Adobe Photoshop and Macromedia Fireworks do a pretty good job of optimizing file size for images. Additional information/assistance on this subject is available in the article titled Graphics at the www.webmonkey.com Website.
Training Options
For information on obtaining training for Photoshop, Illustrator, and other graphical programs, see the Workshops section of the ITS Training Website.