Skip to Main Content

Adding images: Home

This guide explains how to add images to a guide in an accessible way

Adding images to the image manager

Create or save your image into a .jpg or .png file, with a short descriptive file name. Images must not contain text.

Log into LibApps and click on ‘Image Manager’ in the main menu:

LibApps menu bar

LibApps will default to opening your Personal Library but make sure to open the Shared Library:

Shared Image Library option

Click on ‘Upload New Image’ and locate your image and click ‘Open’. Then move down the image library to locate the image:

Image library with chosen image highlighted

Making the image accessible

Now the details need to be added that will make the image searchable on the site and provide alternative text that screen reading software will read aloud.

Click on the image and a new screen will appear:

Image with no keywords or alt text

There are no limits on the character amounts in Keywords but there is a limit of 50 in Alternate Text, including all punctuation. This is not a lot, be very clear.

Adding alternative text to an image

This is done by placing the image and right clicking to open the image properties. From here, add your text in the Alternative Text box.

Using the alternative text box to amend the text

Decorative images

There are times when an image is used purely for decoration. This should be used infrequently as our website is made with mobile phone use in mind. Images make pages load slower and may increase data use and costs if accessed via mobile data. If you decide to have a decorative image, there isn't really any alternative text that would not disrupt the flow of the text and so the image can be given a 'null attribute'. This means that there is no alternative text for a screen reader to read and for users who choose to access our site with the images disabled, the text will acknowledge that there was an image and nothing more. This can be achieved by typing " " (two sets of double quotation marks with a space between) into the alternative text box.

Using two sets of double quotation marks in the alt text box of the image manager

The World Wide Web Consortium, known as W3C, have guidance about when and how to chose alternative text.

Image placement

Images that are placed into a content box will automatically place as an image of a fixed size, measured in pixels. This can cause problems if the image is looked at on a mobile device. To get around this, place the image as a percentage of the box size:

" "

Ideally the image should be a maximum of 80% of the width to allow a little scrolling buffer around the image. The height is much more dependent on the box size and location. Initially, the image can be placed at 100% but this can be changed by going into the image properties and changing it until it fits correctly.

Alt