1. Never use poor quality images. All image files should be large enough to meet the minimum height and width requirements of how you want to use it. If it is too small, blurry, fuzzy, pixelated, or poor quality, find a different image file to use.
  2. Photographs should be taken using a high-resolution camera (not a phone camera) by someone with good photography skills. If needed, fill out a photo request form with advance notice of your event to have photographs taken for you.
  3. Photographs from JMU Creative Media can be used freely as long as they are resized for their purpose in Cascade. It is better to search  "_images" folders based on the type of image you need and the required measurements:
  4. Use quality alt text on images for accessible web design (see below).


Alt Text

One of the first things anyone learns about accessible web design is the importance of the alt attribute on images. Writing alt-text is easy, but writing good alt-text can take some thought. This article outlines steps web designers can take to implement effective alt-text.

ALT means ALTernative: The alt attribute is meant to be an alternative to the image; if the image is displayed, the alt attribute should not be (unfortunately, Internet Explorer gets this wrong by displaying alt attributes as a tooltip). When writing alt-text, it is important to ask yourself what information the image is conveying.

For decorative images, leave it blank: Most sites contain a large number of images that serve purely decorative purposes: things like spacer gifs, images forming the corner of a pretty drop shadow effect, floral patterns attached to item headers. All of these should have their alt attributes left empty. They add no extra information to the content, so as far as a screen reader or text browser is concerned they do not exist.

If an image contains text, replicate the text in full: Images containing text are frequently used when a non-standard typeface is required by a site design. There is absolutely nothing wrong with this technique from an accessibility point of view, provided the alt text exactly replicates the text on the image. There are no exceptions to this rule: if an image contains text, the alt text must be the same. This is particularly important when images are used for navigation elements that also act as links.

For charts and graphs, try to summarize the trend: Charts and graphs are one of the harder image types to make accessible. Often though, a chart will be being used to highlight a specific trend. In this case, the alt text can should be used to summarize that trend, for example "unemployment rates rose from 5% in January to 7% in March."

For custom bullets, use CSS: If an image is being used as a custom bullet point for a list, consider using CSS instead. CSS provides an easy way of replacing the bullet points in an HTML list with a custom image, and doing so will reduce the size of your markup while making things more accessible as well. If for some reason this is not an option (you need to serve up a pixel-perfect design to users of outdated browsers such as Netscape 4) then it is acceptable to use a single asterisk instead: this will at least serve text browsers such as Lynx.

For everything else, be imaginative: The above advice covers the most common easy cases; for images that are there for a purpose and are not covered above you really need to use your imagination. What information is the image conveying? For example, a photograph of your Uncle may have the alt-text "My Uncle, standing in our living room, holding our black and white cat." Writing suitable alt attributes for photographs is particularly difficult. There are no hard and fast guidelines, so it is up to you to make the best of a tricky situation.

courtesy of: gawds.org

Back to Top