Ms P's WebSite Design Extra: Use ALT Tags

Use ALT tags for Images     

What are ALT tags? ALT stands for "alternative text" and is part of the HTML tag that displays a graphic image on a webpage. ALT tag text should be a simple descriptive phrase identifying not just what the picture shows, but what its purpose is on the webpage--like School District Official Logo, or Westside Elementary School Animal Mascot. The ALT tag prompts the browser to display that text until the image itself is displayed in the browser window (or instead of the image if a viewer has images turned off) .

     With ALT text the viewer anticipates what will be displayed in the image location, especially for an image with long load-time. For example, a parent able to read that a picture of their child's work is loading will wait those extra seconds rather than click off to something else.

     ALT text serves an even more important purpose for viewers with a disability requiring audio screen readers or braille displays. Without ALT text, your image is simply "image" so a disabled visitor has no way of knowing what is displayed. When the image is a link to another webpage, a disabled visitor is at a particular disadvantage if no ALT tag is provided along with the image--they don't know what the link is or where it will take them.

     Use ALT tags to increase your site's identity with search engines. Many search engines have a word count limitation for META tags on the page, but by using a keyword, a phrase, or even a sentence for the ALT text in your images, you boost your search engine identity without going over the META limitation.

     For example, many webpages display a school logo or mascot at the very top of the page. Instead of just "XXX School Logo", incorporate your school motto or some special recognition or award:

"Westside Elementary School-A TEA Recognized School and a Texas Mentor School-At our school every child will succeed."

     Finally, newer versions of Internet Explorer display ALT text when the mouse passes over the image. This acts like a Javascript rollover without the webmaster having to learn Javascript language! To insert the ALT text when editing with Microsoft FrontPage, double-click on the image to open the Image Properties window, click the General tab and look for the Text field.