LibGuide Sustainability & Troubleshooting

>Include alt text for all of your images

How to add alt-text to an image you add via the Rich Text/HTML box:

• Select "Image" icon

• In the "Image Properties" window type in the alt-text in the "Alternative Text" field.

Writing Alt text for Images

• Be accurate and equivalent in presenting the same content and function of the image.

• Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as concisely as is appropriate. Typically, no more than a few words are necessary, though in rare cases, a short sentence or two may be appropriate.

• Don't be redundant or provide the same information as text within the context of the image.

• Don't use the phrases "image of ..." or "graphic of ..." to describe the image. It's usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user knows that it is an image that is conveying the content, as opposed to text. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.

Why Alt Text for Images?

• Making images and graphics "visible" to all users is one of the first principles of accessibility. 

• The way you make your image visible to everyone is by adding "alternative text" or "alt-text".

• Adding alt-text to your images is an accessibility best practice.

• Adding alternative text ("alt text") to an image, will make images and graphics "visible".

• For people using screen readers or browsing speech-enabled websites alt-text can be read aloud or rendered as Braille.

• Alt-text gives the speech input software users the ability to put focus onto a button or linked image with a single voice command. 

• Alt-text allows mobile users to turn images off to help with download speeds or limit data-roaming charges.

• In LibGuides there are several ways to add alt-text to images.

  • You can add "default" alt-text to an image by using the "Image Manager" to upload the image.

    • Each time you reuse an image its default alt-text will be attached.

    • This greatly increases the odds alt-text won't be overlooked (especially for images in your shared library.)

  • You can also add /change alt-text when you add an image in a Rich Text/HTML.

Let's look at some examples

Can you identify which images need alt text and which ones don't?

Writing good alternative text can be a tricky endeavor. And every image and surrounding copy will need a judgment call on your part.

But, here are some Springy suggestions to get you started.

Tips for Alternative Text for Specific Types of Images

• Purely decorative image - If the image is purely decorative and the surrounding copy explains the image, then alt text is most likely not needed. (e.g. alt= " ")
• Images that are screenshots - If the image is a screenshot of a database or catalog, with annotations, it is strongly encouraged that you add descriptive copy around the image. Leave the alt text empty. (e.g. alt= " ")
• Images that contain copy - If your graphic contains copy, be sure to either add in descriptive copy around the image or repeat that copy in the alt text.

>Use Headings for hierarchy

• Headings help in organizing a web page.
• When creating headings in LibGuides make sure to use the actual heading option and don't just make them visually look different.

>When copying & pasting text into the rich text box, clear all old formatting

>More on text formatting

>Your embedded videos need closed captioning or transcripts

Embedded media have transcripts and/or captions

• Media from FIU database subscriptions will have accessibility options built-in

• Outside media should be checked for compliance

  • CC: Closed Captions

  • Transcripts

  • Audio Descriptions

Tips for Accessibility

• Images should all have ALT tags or short descriptions in the Image Description Field
• Formatting has been removed from information copied and pasted from outside sources
• Use Headings to organize levels of information (H3, H4, H5, etc…)
  • Use headers in rich text
  • Move consecutively from one heading level to the next (without skipping)
• Improve visibility with careful color selection and high contrast
• Reference shapes to help guide users (e.g., “Click the square button”)
• Consider how screen readers handle forms. Label fields and give descriptions to screen readers via tags. Make the tab order visually ordered
• Present dynamic content carefully, including slideshows
• Offer transcriptions for audio resources, captions/subtitles for video
• Make content easily understandable – simpler language reaches more users, as do effective information hierarchy, progressive disclosure and prompting
• Create a Friendly URL for your guide and each page for easier screen-reading
• Use tools like WAVE to test your design’s accessibility
  • Use the URL of the print version of your page