Staff Guide: LibGuides Standards & Best Practices

Image captions must be used on all images to comply with accessibility guidelines. This text is what screen readers will read out to a user or what will show up when an image is broken.

In the image upload box this will be called Alternative Text. Make a habit of filling this out each time you upload an image.

Learn HOW To Describe Images (Poet Training Tool)

Some Dos & Dont's

• Be specific and succinct
• Don't start with "Image of" or "Picture of"
• Include any text that's part of the image
• You don't need to use alt text for purely decorative images

Complex Image Types

• Alt text for icons should convey the information intended by the icon, such as "Download PDF" or "Visit our Facebook Page" instead of "Icon of PDF" or "Facebook Icon"
• If an image is a link, the alt text should describe what will happen when the image is clicked (rather than what it looks like.) For example the alt text of a question mark that links to to our contact page should be "Contact Us" instead of "question mark".
• If the image is a chart, diagram, illustration, or infographic, you'll need to go further than just alt text. Depending on the complexity of the image you'll need to include a transcript to convey the content of the image. See an example of an accessibly infographic.

Examples

Keep it Simple The alt text set for this image is: Domestic cat standing on snow. In this case you don't need to describe the color or coat of the cat, that it's looking at the camera, or any other details about the scene. The most important aspects are knowing it is a cat, what type of cat it is, and where it is located. If the color of the cat or any other details help convey a meaning not found in the regular text, then be sure to include it in the alt text.

Logos and icons With logos the alt text should just be what the logo is of, instead of trying to describe what the logo looks like. For example "Google Chrome logo" instead of "Google Chrome logo, a blue circle surrounded by a white ring, with a green, red, and yellow ring around it." Describing the shape of the logo doesn't add meaning.

Consider Context When writing alt text consider the context of what the image is meant to represent. This image, for example, could have several different alt texts depending on what you're trying to covey on the page. No context A mostly empty stadium. On a page about track turnouts A lone runner bounds up the steps of an empty stadium On a page about renovation projects A stadium with cracked concrete pillars

• Resize your images for upload if they're very large
  • Images for Libguides should generally not be larger than 900px across
  • Images in Libwizard should generally not be more than 1200 px across
  • If you need to resize an image you can use MS Paint or a service like PhotoPea
• Make sure you're using the proper format (jpg, gif, png)
• Link the image to itself if you want the user to be able to click to see a larger version

When possible use copyright free or Creative Commons images. Keep the license in mind, as most request attribution.

Infographics are very useful and visually interesting, but they are also not accessible to anyone with visual impairments and can be difficult for some learners to follow.

Consider whether an infographic is the right tool to use.

If it is, make sure to include a written transcript of the infographic for those that cannot access it visually.

• Learn how to write transcripts for infographics.

If you do not want to write up a transcript contact Kelley and he can do so for you.