Example #1: Mystery Content

Problem: Without images, this web page just has five small squares in the middle of the screen! There is no text, so it's impossible to figure out what this website is about!

Solution: We would add relevant alternate text to describe what the images show,such as "Coffee flavors" and "Shipping options".

 

Example #2: Poor Alternate Text

Problem: Without images, we saw a web page that had the word “phonenumber” (with no space in between). There was probably a pretty graphic image of the phone number... which we couldn't see.

Possible Fix: We would use the actual phone number with a text explanation, such as “Call the XYZ company at 1-800-222-2222” as the alternate text for the image.

 

Example #3 - Poor contrast

This website is normally bright and beautiful (company name has been erased):

Problem: Without images, the smooth white & brown curved background image disappears, and the text becomes very hard to read because the contrast of light brown on orange is not very strong.

Solution: We would program these two text areas with blocks of color behind the images (white on top and brown on bottom). The normal page view would look exactly the same, but our simple change allows the text to remain readable if images are disabled.

 

Example #4: A Page That Works

Normal View:

 

Without images:

Notice that the logo and all other images on the page have been replaced with alternate text that describes what the images were trying to convey. This page has been properly coded for functionality even without images! (Designed and programmed by our Creative Director, Jennifer O'Keefe)