Skip to Main Content

LibGuides at City St George's

Resources and Best Practices for creating LibGuides at City St George's

Images

Alternative text helps people who can't see images by providing descriptions read aloud by screen readers or shown on braille displays.

When to use alt text

  • Decorative Images: No alt text needed.
  • Informative Images: Needs alt text unless the description is already in the surrounding text.
  • Functional Images: (Images as links) Alt text must describe the link destination or function.

How to write alt text

When an image contains words that are important to understanding the content, the text alternative should include those words. This will allow the alternative to accurately represent the image. Note, that alt text does not necessarily describe all the visual characteristics of the image itself but must convey the meaning of the image. 

  • Identify the main purpose of the image? Don't describe everything in it.
  • Be specific. "A screenshot of filtered results on Library Search" is better than "The Library Search page".
  • Be concise and succinct. Screen readers cannot navigate through headings in alt text, so a very long description can be tiring to read. If the description needs to be longer (i.e. transcribing text in a diagram, consider a long text description, Jessica can advise on where to put this.)
  • If the image is of text - transcribe the text.

Avoid

  • Phrases like "an image of" or file names before the description. A screen reader will announce when a graphic is present. 
  • Containing the file name of the picture. i.e. help_desk_2025.jpeg
  • Lists of keywords; use proper sentences and spellcheck.
  • Redundancy or repetition.
  • Extra information not shown in the image. It's tempting to give people more information, but alt text should only contain information conveyed in the image.

Alt text in libguides

To insert alt-text:

  1. Select the image
  2. Press the image button in the editor toolbar or right click on the image for the context menu.
  3. Open the Image Properties window.
  4. Add your description in the Alternative Text field and select OK.
  5. Select Save and Close the text editor.

The image properties box in libguides highlighting the alternative text field.

Library Services specific best practice

Screenshots

There are a lot of screenshots used in LibGuides and LibAnswers (FAQs) to illustrate instructions for accessing online resources and services.

  • Include as much useful information as you can in the instructions themselves to minimise alt text overload.
  • If everything relevant is described in the body text on the webpage, you can write minimal alt text which directs the screen reader user to the longer description. However, be aware that the instructions must provide the equivalent of what is conveyed by the image and must not miss any crucial information. 
  • Don't rely solely on visual cues. Use the actual names of links and buttons rather than just describing what they look like.

Please refer to the following Staff Manual FAQ for further guidance on formatting screenshots using instructions in a numbered list. How to make accessible Ask Us entries. 

Further guidance on writing alt text

Resources